AngularJs中模塊的依賴註入,ng-model、ng-bind和{{}}的區別,路由機制。

AngularJS的四大核心特性

<1>MVC

<2>模塊化和依賴註入

<3>雙向數據綁定

<4>指令

1、模塊的註入和依賴

var bookStoreApp = angular.module('bookStoreApp', [
    'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
    'bookStoreServices', 'bookStoreDirectives'
]);

2、ng-bind是從$scope -> view的單向綁定

ng-modle是$scope <-> view的雙向綁定

{{}}

一直不明白它們幾個的區別,看瞭視頻明白瞭,其實ng-bind和{{}},沒有啥區別,隻是二者使用的情景不是很一樣,一般情況下,建議ng-bind在首頁加載的時候使用,{{}}建議是首頁意外的頁面使用,因為雙括號{{}}在加載的時候,若網速不好或者首頁還未加載angular庫時,其會顯示出來,這樣用戶在使用時,會感覺頁面不是特別美觀,既然存在這個問題,以後在寫的時候,還是註意點.

<p>
      <input ng-model="greeting.text"/>
      <p>{{greeting.text}},Angular</p>
</p>

3、在項目的開發過程中,我們會用到angular的路由,這也是angular的核心,但是angular本身自帶的路由機制一般無法滿足項目的需求,它不能實現路由的深層次嵌套,所以我們會引入angular-ui-router,angular自帶的路由機制和我們引入的ui-router在使用的時候有小部分區別,但是重點都是一樣的。

下面給出引入ui-router的部分代碼

bookStoreApp.config(function($routeProvider) {
    $routeProvider.when('/hello', {
        templateUrl: 'tpls/hello.html',
        controller: 'HelloCtrl'
    }).when('/list', {
        templateUrl: 'tpls/bookList.html',
        controller: 'BookListCtrl'
    }).otherwise({
        redirectTo: '/hello'
    })
});

發佈留言