初级angular

Posted 2020-06-18 风的味道

前几个月，又是过年，又是项目，今天补一篇。

　　angular是google产的，其他没怎么关心，学习主要是数据的双向绑定，是一个MVC框架，V就是html页面，C即angular的controller，M就是数据对象。

　　angular的形式是个app，声明方式就是在父级data-ng-app=‘ ‘；或者ng-app=‘ ‘；

　　<div ng-app=""></div>这样就定义了一个angularJS的应用程序，这只是一个声明，一个html页面默认只有一个angular程序，若含有多个，第二个及以后的angular程序就自己手动激活：

　　<div ng-app=‘appOne‘ id=‘one‘></div>

　　<div ng-app=‘appTwo‘ id=‘two‘></div>

　　<div ng-app=‘appThree‘ id=‘three‘></div>

　　//添加多个，激活除了第一个以外的app

　　<script>

　　　　var one = angular.module(‘appOne‘, []);  //angular的模块入口，加载controller，service等模块

　　　　var two = angular.module(‘appTwo‘, []);

　　　　var three = angular.module(‘appThree‘, []);

　　　//激活程序

　　　　angular.element(document).ready(function(){

　　　　　　angular.boostrap(document.getElement(‘two‘), [‘appTwo‘]);

　　　　　　angular.boostrap(document.getElement(‘three‘), [‘appThree‘]);

　　　　});

     </script>

　　

 

　　再说一下程序与元素的数据双向绑定

　　主要用到的是ng-model属性和ng-bind（{{}}）,若你要初始化一个app的数据，可以用ng-init属性;

　　<div ng-app=‘‘ ng-init=‘x=5‘>

　　　　<p><input type=‘text‘ ng-model=‘num‘/></p>

　　　　<p ng-bind=‘num‘></p>

　　　　<p>{{x}}</p>

　　</div>

 

　　继续说angular中的ajax吧：

　　angular中的ajax主要用到angular中的$http服务，用于读取远程服务器的数据(也可以数据库哦)，$http.post(url).success()，$http.get(url).success()；

　　<div ng-app=‘app‘ ng-controller=‘ctrl‘>

　　　　<ul>

　　　　　　<li ng-repeat=‘x in num‘></li>

　　　　</ul>

　　</div>

　　<script>

　　　　var app = angular.module(‘app‘, []);

　　　　app.controller(‘ctrl‘, function($scope, $http){

　　　　　　//如果用到post，直接把get换成post

　　　　　　$http.get(url).success(function(response){

　　　　　　　　$scope.num = response.num;

　　　　　　});

　　　　});

　　</script>

 

　　angular中的service，directive，controller是什么?我们该如何用它？

　　敬请下期！

ps:由于加载效率问题，请把angular放到底部，那么相应的写的脚本也要放到底端，否则会报错！