您好,登錄后才能下訂單哦!
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."屬性名" // 也可以對$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的簡單使用詳解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。