首頁 web前端 js教程 AngularJS基礎_AngularJS

AngularJS基礎_AngularJS

May 16, 2016 pm 04:25 PM
angularjs

angularJS定義與特點

1.google前端開源框架

2.MVVM(model view view-model)設計模式 : Model將和ViewModel互動(透過$scope物件),將監聽Model的變化。這些可以透過View來傳送和渲染,由HTML來展示你的程式碼

3.方便的REST

4.資料綁定與依賴注入

5.可以操作XML一樣操作HTML,AngularJS透過自己的編譯器和directives來完成相關的設定

6.模板被當作DOM元素傳遞到Angular的編譯器

7.AngularJS 透過 指令 擴充了 HTML,且透過 表達式 綁定資料到 HTML。

建構angularJS應用

加Angular的<script>標籤到<head>標籤裡</script>

複製程式碼 程式碼如下:


加ng-app directive到

標籤

複製程式碼 程式碼如下:

    ng-app="guetonline"
    ng-controller="MainController"
    >

新目錄script和app.js文件,在app.js中定義和配置所有模組和依賴

複製程式碼 程式碼如下:

var app = angular.module('guetonline', [
  'ngRoute',
  'mobile-angular-ui',
  'mobile-angular-ui.gestures'
]);

在模組app中定義控制器、服務、指令

複製程式碼 程式碼如下:

app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //控制器
app.service( 'MainSevicel', function() {} ) //服務
app.directive( 'dragToDismiss', function() {} ) //指令

在模組app中定義路由

複製程式碼 程式碼如下:

app.config(function($routeProvider) {
  $routeProvider.when('/',              {templateUrl: 'index/home', reloadOnSearch: false});
  $routeProvider.when('/scroll',        {templateUrl: 'scroll.html', reloadOnSearch: false});
  $routeProvider.when('/toggle',        {templateUrl: 'toggle.html', reloadOnSearch: false});
  $routeProvider.when('/tabs',          {templateUrl: 'tabs.html', reloadOnSearch: false});
  $routeProvider.when('/accordion',     {templateUrl: 'accordion.html', reloadOnSearch: false});
  $routeProvider.when('/overlay',       {templateUrl: 'overlay.html', reloadOnSearch: false});
  $routeProvider.when('/forms',         {templateUrl: 'forms.html', reloadOnSearch: false});
  $routeProvider.when('/dropdown',      {templateUrl: 'dropdown.html', reloadOnSearch: false});
  $routeProvider.when('/drag',          {templateUrl: 'drag.html', reloadOnSearch: false});
  $routeProvider.when('/carousel',      {templateUrl: 'carousel.html', reloadOnSearch: false});
  $routeProvider.when('/news/official_view',      {templateUrl: '/news/official_view', reloadOnSearch: false});
});

待續。 。下一步深入學習4.5兩步,還有濾鏡

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

2022年最新5款的angularjs教學從入門到精通 2022年最新5款的angularjs教學從入門到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。

使用PHP和AngularJS建立響應式網站,提供優質的使用者體驗 使用PHP和AngularJS建立響應式網站,提供優質的使用者體驗 Jun 27, 2023 pm 07:37 PM

在現今資訊時代,網站已成為人們獲取資訊和交流的重要工具。一個響應式的網站能夠適應各種設備,為使用者提供優質的體驗,成為了現代網站開發的熱點。本篇文章將介紹如何使用PHP和AngularJS建立響應式網站,進而提供優質的使用者體驗。 PHP介紹PHP是一種開源的伺服器端程式語言,非常適合Web開發。 PHP具有許多優點,如易於學習、跨平台、豐富的工具庫、開發效

使用PHP和AngularJS建立Web應用 使用PHP和AngularJS建立Web應用 May 27, 2023 pm 08:10 PM

隨著網路的不斷發展,Web應用已成為企業資訊化建設的重要組成部分,也是現代化工作的必要手段。為了讓Web應用能夠方便開發、維護和擴展,開發人員需要選擇適合自己開發需求的技術框架和程式語言。 PHP和AngularJS是兩種非常流行的Web開發技術,它們分別是伺服器端和客戶端的解決方案,透過結合使用可以大大提高Web應用的開發效率和使用體驗。 PHP的優勢PHP

使用Flask和AngularJS建立單頁Web應用程式 使用Flask和AngularJS建立單頁Web應用程式 Jun 17, 2023 am 08:49 AM

隨著Web技術的快速發展,單頁Web應用程式(SinglePageApplication,SPA)已成為越來越流行的Web應用程式模型。相較於傳統的多頁Web應用程序,SPA的最大優勢在於使用者感受更加流暢,同時伺服器端的運算壓力也大幅減少。在本文中,我們將介紹如何使用Flask和AngularJS來建構一個簡單的SPA。 Flask是一款輕量級的Py

使用PHP和AngularJS開發一個線上文件管理平台,方便文件管理 使用PHP和AngularJS開發一個線上文件管理平台,方便文件管理 Jun 27, 2023 pm 01:34 PM

隨著網路的普及,越來越多的人使用網路進行檔案傳輸和分享。然而,由於各種原因,使用傳統的FTP等方式進行檔案管理無法滿足現代使用者的需求。因此,建立一個易用、高效、安全的線上文件管理平台已成為了一種趨勢。本文介紹的線上文件管理平台,基於PHP和AngularJS,能夠方便地進行文件上傳、下載、編輯、刪除等操作,並且提供了一系列強大的功能,例如文件共享、搜尋、

如何在PHP編程中使用AngularJS? 如何在PHP編程中使用AngularJS? Jun 12, 2023 am 09:40 AM

隨著Web應用程式的普及,前端框架AngularJS變得越來越受歡迎。 AngularJS是一個由Google開發的JavaScript框架,它可以幫助你建立具有動態Web應用程式功能的網頁應用程式。另一方面,對於後端編程,PHP是非常受歡迎的程式語言。如果您正在使用PHP進行伺服器端編程,那麼結合AngularJS使用PHP將可以為您的網站帶來更多的動態效

AngularJS基礎入門介紹 AngularJS基礎入門介紹 Apr 21, 2018 am 10:37 AM

這篇文章介紹的內容是關於AngularJS基礎入門介紹,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下。

如何使用PHP和AngularJS進行前端開發 如何使用PHP和AngularJS進行前端開發 May 11, 2023 pm 05:18 PM

隨著網路的普及和發展,前端開發已變得越來越重要。身為前端開發人員,我們需要了解並掌握各種開發工具和技術。其中,PHP和AngularJS是兩種非常有用且受歡迎的工具。在本文中,我們將介紹如何使用這兩種工具進行前端開發。一、PHP介紹PHP是一種流行的開源伺服器端腳本語言,它適用於Web開發,可以在Web伺服器和各種作業系統上運作。 PHP的優點是簡單、快速、便

See all articles