AngularJS初体验一

最新推荐文章于 2020-09-01 00:05:26 发布

原创最新推荐文章于 2020-09-01 00:05:26 发布 · 482 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

AngularJS 专栏收录该内容

2 篇文章

订阅专栏

本文深入解析AngularJS中的模块声明、作用域概念及应用，包括如何使用angular.module()方法声明模块，如何通过$rootScope和$scope管理数据，以及运行与控制器的区别。同时强调了AngularJS的设计理念与jQuery的不同之处。

我在网上搜了下，AngularJS使用DOM选择，，，大牛说，学习AngularJS就忘掉JQuery...因为他们的设计的理念不一样...

1、AngularJS允许我们使用angular.module()方法来声明模块这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表

angular.module('myApp', []);

2、调用这个方法时如果只传递一个参数，就可以用它来引用模块

// 这个方法用于获取应用
angular.module('myApp')

3、AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层

$rootScope是AngularJS中最接近全局作用域的对象。在$rootScope上附加太多业务逻并不是好主意，这与污染JavaScript的全局作用域是一样的。

4、$scope对象在AngularJS中充当数据模型，它只是视图和HTML之间的桥梁，它是视图和控制器之间的胶水。

run 和 controler区别...

run 将变量设置在$rootScope上

ang<div ng-app="myApp"> 
  <h1>Hello {{ name }}</h1> 
</div>
ular.module('myApp', []) 
  .run(function($rootScope) { 
    $rootScope.name = "World"; 
});

controller 将一个控制器对象附加到DOM元素上子$scope对象

<div ng-app="myApp"> 
  <div ng-controller="MyController"> 
    <h1>Hello {{ name }}</h1> 
  </div> 
</div> 
angular.module("myApp", []) 
.controller('MyController',  
function($scope) { 
  $scope.name = "Ari"; 
});

ng-controller指令为这个DOM元素创建了一个新的$scope对象，并将它嵌套在$rootScope中

设计良好的应用会将复杂的逻辑放到指令和服务中。

简洁的控制器：

angular.module('myApp', []) 
.controller('MyController', function($scope,UserSrv) { 
  // 内容可以被指令控制 
  $scope.onLogin = function(user) { 
    UserSrv.runLogin(user); 
  }; 
});    //UserSrv是什么