angurlarjs学习笔记

Posted 2020-08-23 走小天

一些需要记忆的知识点：

1、自定义指令：

app.directive("nameDirective" , function(){

　　template: ""

});

2、app ＝ angular.module("MyApp", [])

模块定义中，［］表示模块的依赖关系，  应该填写依赖模块的名字， 为null表示没有依赖关系。

3、注意， 一般将angularjs库放到head元素中加载， 而AnJS脚本放到body元素底部加载，原因： 这样会提高网页加载速度，因为html加载不受制于脚本加载。

4、angular.copy() : 复制一个数据到另一个数据 。。 

5、在控制器里定义方法， 在控制器里调用方法， 此方法也可以在html中调用。

AnJS  用来代替AJAX 表单提交， 而不是asp.net form表单提交。

6、Form 表单提交 anjs 使用思考：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<div ng-app="myApp" ng-controller="formCtrl">   <form>     First Name:<br>     <input type="text" ng-model="user.firstName"><br>     Last Name:<br>     <input type="text" ng-model="user.lastName">     <br><br>     <button ng-click="reset()">RESET</button>  <button ng-click="submit()">submit</button>   </form>   <p>form = {{user }}</p>   <p>master = {{master}}</p> </div>   <script> var app = angular.module(\'myApp\', []); app.controller(\'formCtrl\', function($scope) {     $scope.master = {firstName:"John", lastName:"Doe"};     $scope.reset = function() {         $scope.user = angular.copy($scope.master);     };     $scope.reset();     $scope.submit = function(){         /// 把 $scope.user 提交到后台， $http, $.ajax ,  并获取返回数据<br>　　　　　　　　　　/// http  请求 就是 AJAX 请求     }; }); </script>

7、 anJS表单 客户端 验证：    

input 元素的： required 

$dirty : 表单有填写记录,为true ， 更改表单就会为true.  只要在表单中改变数据，都为null。

$pristine :  表单没有填写记录， 就是没有更改表单中数据 时， 为true ， 一般是刚加载出来 改变数据时，

$valid

$invalid :  为null时，无效 ， $invalid 为true

.$error.required

 

可以模仿使用：

<p>邮箱:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
  <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
  </span>
</p>

8、AngularJS API:

全局API:

angular.lowercase() :  

angular.uppercase()

angular.isString():

angular.isNumber() : 判断是否时数字

9、常识： (SSI： Server Side Includes， 服务器端包含） 

AngularJS 包含： ng-include="\'html文件路径\'"

10、angularJS 也可以写动画， 利用css ，暂时不多做了解，用的少。

11、依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。

AnJS 依赖注入核心组件：  [理解不够透彻]

1、value  : JS 对象 ， 用于向控制器传递值（注入到控制器中）

app.value("","")

2、factory : 是一个函数用于返回值，常用来计算或返回值， 在service 和 controller 需要时创建。

app.factory("Name",function(){});

3、provider 创建一个service , factory 等

app.config(function($provider){

　　$provider.provider("NameService",function(){  /// provider 创建服务 

　　　　　this.$get = function(){      /// get方法， 创建一个factory,

　　　　};　　

　　});

});

4、constant , 用来配置阶段传递值

app.constant("", "");

PS: 使用$scope 双向绑定model ,  可以在anjs中直接调用$scope变量， 也就是调用anjs函数可以不用传值了。

 

12、AnJS 路由js文件路径 ： http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js

$routeProvider 用来定义路由规则   ,,,       实现多视图的单页面访问，在写菜单url很有用。

app.config(["$routeProvider",function($routeProvider){

　　$routeProvider

　　　　.when(\'/\',{template:"hssdffaffa"})

　　　　.when()

　　　　.otherwise({redirectTo:"/"});

}]);

 

来自http://www.cnblogs.com/generalLi/articles/5988096.html