首页 > 代码库 > 01 Angular
01 Angular
实例代码
html部分
<div ng-app="myApp" ng-controller="demoController"> <h1>使用NG实现双边数据绑定</h1> <p>{{message}}</p> 姓名:<input type="text" placeholder="请输入姓名" ng-model="user.name"><br> 密码:<input type="password" placeholder="请输入6位数密码" ng-model="user.password"><br> <p>hello,{{user.name}},你的密码是:{{user.password}}</p> <input type="button" ng-click="show()" value="console显示对象"> </div>
JavaScript部分
<script src="http://www.mamicode.com/bower_components/angular/angular.js"></script> <script> var app = angular.module(‘myApp‘,[]); app.controller(‘demoController‘,function ($scope) { $scope.user={ name:‘xiao‘, password:‘123456‘ }; $scope.show = function () { console.log($scope.user); } $scope.message = "请按要求输入!"; $scope.$watch(‘user.password‘,function (now,old) { // 当user.username发生变化时触发这个函数 if (now){ if (now.length <6){ $scope.message = ‘请输入6位数密码‘; }else { $scope.message = ‘‘; } }else { $scope.message = ‘请按要求输入‘; } }); }) </script>
笔记:
1.注册模块
var app= angular.module(‘myApp‘,[]);
- 第一个参数是这个模块名字:myApp
- 第二个参数是这个模块所依赖的模块,如果不依赖任何模块也必须传递第二个参数
如果没有传递第二个参数,angular.module就不是创建一个模块
angular.module(‘myModule‘, []) 返回 刚刚创建的模块对象 - <div ng-app="myApp" ng-controller="demoController"> ng-app一个网页中只能有一个,通常加在HTML或者body标签
2.注册控制器
app.controller(‘demoController‘,function ($scope) { }
- 控制器是必须出现在某个模块下的,想创建一个控制器必须先创建模块:如‘app’
- angular在执行控制器函数时,会根据参数的名字($scope)去自动的注入对象
根据参数名称传递对应对象,所以必须要写正确的参数名称,如:$scope、$http - 由于压缩代码会改变参数名称,注册控制的标准方式就是通过第二个参数传递数组的方式(数组的成员最后一个就是原本的控制器函数,前面的成员都是需要注入的对象名称)
注册控制器的标准写法:
module.controller(‘HelloController‘, [‘$scope‘,‘$http‘, function(a,b) { console.log(a); }]);
3.$watch
官方的API中提供了一个$scope.$watch方法
$scope.$watch(‘user.username‘, function(now, old) { // 当user.username发生变化时触发这个函数 console.log(‘now is ‘ + now); console.log(‘old is ‘ + old); });
注意: angular 基本不用操作DOM,如果必要,可以使用angular提供的jqlite
angular.element(‘body‘);
01 Angular
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。