快捷導(dǎo)航

AngularJS基礎(chǔ)知識(shí)

更新時(shí)間：2014年12月21日 14:16:23 投稿：hebedich

這篇文章主要介紹了AngularJS基礎(chǔ)知識(shí),包括AngularJS定義和特點(diǎn)以及構(gòu)建AngularJS應(yīng)用的方法，推薦給大家。

angularJS定義和特點(diǎn)

1.google前端開(kāi)源框架

2.MVVM(model view view-model)設(shè)計(jì)模式 : Model將和ViewModel互動(dòng)（通過(guò)$scope對(duì)象），將監(jiān)聽(tīng)Model的變化。這些可以通過(guò)View來(lái)發(fā)送和渲染，由HTML來(lái)展示你的代碼

3.方便的REST

4.數(shù)據(jù)綁定和依賴(lài)注入

5.可以操作XML一樣操作HTML,AngularJS通過(guò)自己的編譯器和directives來(lái)完成相關(guān)的設(shè)置

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

7.AngularJS 通過(guò) 指令擴(kuò)展了 HTML，且通過(guò) 表達(dá)式綁定數(shù)據(jù)到 HTML。

構(gòu)建angularJS應(yīng)用

添加Angular的<script>標(biāo)簽到<head>標(biāo)簽里

復(fù)制代碼代碼如下:

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>

添加ng-app directive到<body>標(biāo)簽

復(fù)制代碼代碼如下:

<body 

    ng-app="guetonline" 

    ng-controller="MainController"

    >

新建目錄script和app.js文件，在app.js中定義和配置所有模塊和依賴(lài)

復(fù)制代碼代碼如下:

var app = angular.module('guetonline', [

  'ngRoute',

  'mobile-angular-ui',

  'mobile-angular-ui.gestures'

]);

在模塊app中定義控制器、服務(wù)、指令

復(fù)制代碼代碼如下:

app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //控制器

app.service( 'MainSevicel', function() {} ) //服務(wù)

app.directive( 'dragToDismiss', function() {} ) //指令

在模塊app中定義路由

復(fù)制代碼代碼如下:

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});

});

待續(xù)。。下一步深入學(xué)習(xí)4.5兩步，還有過(guò)濾器

您可能感興趣的文章: