首頁 > web前端 > js教程 > 主體

AngularJS基礎_AngularJS

WBOY
發布: 2016-05-16 16:25:23
原創
982 人瀏覽過

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兩步,還有濾鏡

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板