基于AngularJS的簡單使用詳解
Angular Js 的初步認(rèn)識和使用
一:
1.模塊化
定義模塊和控制器 ng-app="myapp" controller="myctrl"
指定模型 ng-model=""
獲取的屬性值: ng-bind="屬性名"或者{{屬性名}}
2.初始化模塊(在Script中進(jìn)行)
var myapp1 =angular.module("myapp",[]);
3.定義模塊的控制器,并依賴注入,
$scope:可以操作模塊作用域內(nèi)的所有視圖
myapp1.controller("myctrl",["$scope",function($scope){ $scope."屬性名" // 也可以對$scope操作的視圖進(jìn)行賦值 $scope."屬性名"="值"; }])
4.綁定事件
//其他事件聯(lián)想基本為:ng-動作 ng-click="clear()" 在定義的模塊控制器中進(jìn)行事件函數(shù)的后續(xù)操作: $scope.clearSop=function(){ $scope.name=""; }
5.集合數(shù)據(jù)的遍歷
數(shù)據(jù)格式范例:對象數(shù)組一般的數(shù)據(jù)類型(進(jìn)行頁面數(shù)據(jù)交互時因注意json的數(shù)據(jù)格式)
$scope.products = [ { id : 1001, name : '數(shù)碼相機(jī)', price : 3000 },{ id : 1002, name : '蘋果手機(jī)', price : 7000 } ];
遍歷樣式:product相當(dāng)于元素,products相當(dāng)于集合,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.需要單獨(dú)導(dǎo)入:angular-route.js文件
2.定義angular模塊
3.初始化模塊
4.路由中的路徑格式采用:"#/+url"
5.使用ng-view的模塊用來展示路由加載后的變化內(nèi)容
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的簡單使用詳解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Angular4綁定html內(nèi)容出現(xiàn)警告的處理方法
這篇文章主要給大家介紹了關(guān)于Angular4綁定html內(nèi)容出現(xiàn)警告的處理方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11Angular4學(xué)習(xí)之Angular CLI的安裝與使用教程
網(wǎng)上很多教程過時,命令在angular4中不適用等等,所以下面這篇文章主要給大家介紹了關(guān)于Angular4學(xué)習(xí)之Angular CLI的安裝與使用教程的相關(guān)資料,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01Angular5給組件本身的標(biāo)簽添加樣式class的方法
本篇文章主要介紹了Angular 5 給組件本身的標(biāo)簽添加樣式class的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04