Angular Js 的初步認識和使用

一：

1.模塊化

定義模塊和控制器 ng-app="myapp" controller="myctrl"

指定模型 ng-model=""

獲取的屬性值: ng-bind="屬性名"或者{{屬性名}}

2.初始化模塊(在Script中進行)

var myapp1 =angular.module("myapp",[]);

3.定義模塊的控制器,并依賴注入,
$scope:可以操作模塊作用域內的所有視圖

myapp1.controller("myctrl",["$scope",function($scope){$scope."屬性名"http:// 也可以對$scope操作的視圖進行賦值$scope."屬性名"="值";}])

4.綁定事件

//其他事件聯想基本為:ng-動作ng-click="clear()" 在定義的模塊控制器中進行事件函數的后續操作:$scope.clearSop=function(){$scope.name="";}

5.集合數據的遍歷

數據格式范例:對象數組一般的數據類型(進行頁面數據交互時因注意json的數據格式)

$scope.products = [{id : 1001,name : '數碼相機',price : 3000},{id : 1002,name : '蘋果手機',price : 7000}];

遍歷樣式:product相當于元素,products相當于集合,index為索引

<tr ng-repeat="product in products"><td>{{$index+1}}</td><td>{{product.id}}</td><td>{{product.name}}</td><td>{{product.price}}</td></tr>

6.AngularJS中的路由的使用

1.需要單獨導入:angular-route.js文件

2.定義angular模塊

3.初始化模塊

4.路由中的路徑格式采用:"#/+url"

5.使用ng-view的模塊用來展示路由加載后的變化內容

6.初始化模塊:

var myapp1=angular.module("myapp",["noRoute"]);

7.配置模塊的路由

myapp.config(["$routeProvider", function($routeProvider){$routeProvider .when('/JavaEE', { templateUrl: '5_1.html' }) .when('/IOS', { templateUrl: '5_2.html' }) .when('/Android', { templateUrl: '5_3.html' }) .otherwise({ redirectTo: '/JavaEE' });}]);

以上這篇基于AngularJS的簡單使用詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。