初识

directive 指令

  1. ng-app 初始化一个AngularJs应用程序（通过一个值（比如 ng-app="myModule"）连接到代码模块。）

  2. ng-init 初始化应用程序数据（一般不用）

  3. ng-model 把元素值绑定到应用程序（mvvm的双向绑定）

  4. ng-bind 将应用程序数据绑定到html视图

  5. 表达式 {{}} 功能类似 ng-bind，但更广泛的用途

     	<!DOCTYPE html>
    
 <html lang="zh-cn">
    
 <head>
    
 <meta charset="utf-8">
    
 <script src="angular.min.js"></script>
    
 </head>
    
 <body>
    
 <div ng-app="" ng-init="firstName='John'">

 <p>在输入框中尝试输入:</p>
    
 <p>姓名: <input type="text" ng-model="firstName"></p>
    
 <p>你输入的为: {{ firstName }}</p>
    
 <p>你输入的为: <span ng-bind="firstName"></span></p>
    
 </div>
    
 </body>
    
 </html>

  6. ng-repeat 重复一个html元素（循环）

  7. 自定义指令

      mainApp.directive('focus', function () {
    
    return {
    
      link: function (scope, element, attrs) {
    
        element[0].focus();
    
      }
    
    };
    
  });

  8. 其他常用指令

    ng-show,ng-hide,ng-class,ng-view,ng-switch, ng-if, ng-options,ng-disabled,ng-click,ng-include="''"(需要引号，跨域要设置白名单)

表单验证

状态信息

    <form ng-app="" name="myForm">

        Email:

        <input type="email" name="myAddress" ng-model="text">

        <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

    </form>

    <p>提示信息会在 ng-show 属性返回 true 的情况下显示。</p>

样式切换

ng-model 指令根据表单域的状态添加/移除以下类

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

作用域scope

$scope.$watch('passw1',function() {$scope.test();});

过滤器filter

  1. uppercase，lowercase 大小写转换

     {{ "lower cap string" | uppercase }}   // 结果：LOWER CAP STRING
    
 {{ "TANK is GOOD" | lowercase }}      // 结果：tank is good

  2. date 格式化

     {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25

  3. number 格式化（保留小数）

     {{149016.1945000 | number:2}}

  4. currency货币格式化

     {{ 250 | currency }}            // 结果：$250.00
    
 {{ 250 | currency:"RMB ￥ " }}  // 结果：RMB ￥ 250.00

  5. limitTo 截取

     {{"1234567890" | limitTo :6}} // 从前面开始截取6位
    
 {{"1234567890" | limitTo:-4}} // 从后面开始截取4位

  6. 查找、排序、自定义过滤

     <body ng-app="myApp">
    
 <div ng-controller="myCtrl">
    
 	<div ng-bind="myName  | uppercase"></div> <!--uppercase转换成大写-->
    
 	<div class="" ng-bind="money | currency : '￥'"> </div><!--currency 过滤器将数字格式化为货币格式-->
    
 	<div class="" ng-repeat="v in city | orderBy:'id'">
    
 		<p ng-bind="v.name"></p>
    
 	</div><!--orderBy 过滤器根据表达式排列数组-->

 	<div class="" ng-repeat="v in city | orderBy:'-id' | filter : '上海'">
    
 		<p ng-bind="v.name" style="color:red;"></p>
    
 	</div>
    
 	<!--orderBy 过滤器根据表达式排列数组   默认正序asc,倒序添加-负号-->
    
 	<!--filter 过滤器根据表达式过滤不包含过滤器中的内容-->

 	<!--自定义过滤器aa-->
    
 	<div class="" ng-bind="myName | reverse" style="color:blue;"></div>
    
     <div class="" ng-bind="myName | reverse:true" style="color:blue;"></div>
    
 </div>
    
 <script>
    
 angular.module('myApp',[]).controller('myCtrl',function($scope){
    
 	$scope.myName="Dhx";
    
 	$scope.money=100;
    
 	$scope.city=[
    
 		{"id":"1","name":"福建"},
    
 		{"id":"2","name":"广东"},
    
 		{"id":"5","name":"上海"},
    
 		{"id":"4","name":"北京"},
    
 		{"id":"3","name":"四川"}
    
 	]
    
 }).filter('reverse',function(){
    
 	return function(input, uppercase){
    
                      input = input || '';
    
                      var out = input.split("").reverse().join("");
    
                      if (uppercase) {
    
                      out = out.toUpperCase();
    
                      }
    
 	     return out;
    
 	}
    
 })
    
 </script>
    
 </body>

服务Service

$location ，$http(不能跨域) , $timeout, $interval

用provider自定义一个服务

(1)

var mainApp = angular.module('mainApp', []);

mainApp.config(function($provide) {

	$provide.provider('CalcService', function() {

	this.$get = function() {

		var factory = {};  

		factory.square = function(a) {

			return a * a;

		}

		return factory;

	};

	});

});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService.square($scope.number);

	}

 });

(2)

var mainApp = angular.module('mainApp', []);

mainApp.config(function($provide) {

	$provide.factory('CalcService', function() {

			var factory = {};  

			factory.square = function(a) {

				return a * a;

			}

			return factory;

	});

});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService.square($scope.number);

	}

 });

(3)

var mainApp = angular.module('mainApp', []);

mainApp.config(function($provide) {

	$provide.factory('CalcService', function() {

		return function(a) {

			return a * a;

		};

	});

});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService($scope.number);

	}

 });

用factory自定义一个服务

(1)

var mainApp = angular.module('mainApp', []);

mainApp.factory('CalcService', function() {

	var factory ={};

	factory.square = function(a) {

		return a * a;

	}

	return factory;

});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService.square($scope.number);

	}

 });

(2)

var mainApp = angular.module('mainApp', []);

mainApp.factory('CalcService', function() {

		return function(a) {

			return a * a;

		}

	});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService($scope.number);

	}

 });

用service自定义一个服务

(1)

var mainApp = angular.module('mainApp', []);

mainApp.service('CalcService', function(){

	this.square = function(a) {

		return a * a;

	}

});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService.square($scope.number);

	}

 });

(2)

var mainApp = angular.module('mainApp', []);

mainApp.service('CalcService', function(){

	return function(a) {

		return a * a;

	}

});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService($scope.number);

	}

 });

依赖注入

value，factory，service，provider，constant

select



Api

  • angular.lowercase(a) 转换字符串为小写
  • angular.uppercase(a) 转换字符串为大写
  • angular.isString(a) 判断给定的对象是否为字符串，如果是返回 true。
  • angular.isNumber(a) 判断给定的对象是否为数字，如果是返回 true。
  • angular.isFunction(a)
  • angular.extend(a,b) 从b对象复制所有属性和函数到a.
  • angular.copy(a),angular(a,b) 拷贝一个副本
  • angular.isObject(a)
  • angular.isArray(a)
  • angular.forEach(object,function(value,key){}); angular.forEach(myArray,function(value,index){})
  • angular.isDefined(a)
  • angular.isUndefined(a)

路由

http://runoob.com/#/first

http://runoob.com/#/second

对服务器而言它们是同一个链接，AngularJS路由就通过“ # + 标记”帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

  1. 载入了实现路由的 js 文件：angular-route.js。

  2. 包含了 ngRoute 模块作为主应用模块的依赖模块。

     angular.module('routingDemoApp',['ngRoute'])

  3. 使用 ngView 指令。

     <div ng-view></div>//该 div 内的 HTML 内容会根据路由的变化而变化。

  4. 配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

     module.config(['$routeProvider', function($routeProvider){
    
 	$routeProvider
    
 		.when('/',{template:'这是首页页面'})
    
 		.when('/computers',{template:'这是电脑分类页面'})
    
 		.when('/printers',{template:'这是打印机页面'})
    
 		.otherwise({redirectTo:'/'});
    
 }]);

$routeProvider.when

$routeProvider.when(url, {

	template: string,

	templateUrl: string,

	controller: string, function 或 array,

	controllerAs: string,

	redirectTo: string, function,

	resolve: object<key, function>

});

  • template:如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

  • templateUrl: 如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

    $routeProvider.when('/computers', {

    templateUrl: 'views/computers.html',

    });

  • controller: function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。

  • controllerAs: string类型，为controller指定别名。

  • redirectTo: 重定向的地址。

  • resolve: 指定当前controller所依赖的其他模块。

猜测（待确认）：

  1. 一个应用可以有多个模块，但在页面上只能有一个ng-app指令，一个模块可以有多个controller
  2. 如果html是视图，JavaScript代码中应该有一个自动构建的对应的viewModel
  3. 每个controller对应着一个scope。controller与controller之间相关隔离，通过rootScope共享数据。

    通过在controller中修改scope，也就在修改viewModel，进而也就修改了view,因为view和viewModel是自动同步的，
  4. $XX代表这是一个应用对象，如$scope, $rootScope，$valid，$dirty，$touched，$error等， $符号不能缺失

笔记 （待整理）

  1. var todoApp = angular.module("todoApp",[]);其中第二个参数是一个由所依赖模块构成的数组，换言之在应用中是可以存在多个模块的。

    1. var todoApp = angular.module("todoApp");则是查找已定义的模块todoApp

  2. 浏览器插件batarang

  3. todoApp.run(function($http){$http.get("todo.json").then(function(data){model.items=data;})});run方法会在AngularJs执行完初始化设置后允许一次。

  4. AngularJs自带一个裁剪版的jQuery，叫做jqLite,而如果页面中引入了jQuery,AngularJs会自动检测到并优先使用jQuery代替jqLite。

  5. 规则

    1. 视图逻辑仅为显示准备数据，永远不应该修改模型。
    2. 控制器逻辑永远都不应该直接增删改模型中的数据。
    3. 客户端永远都不应该直接访问数据存储。

  6. JS中的对象操作

     var myData = {name:"name",weather:"weather"};
    
 //判别类型
    
 console.log(angular.isObject(myData)) //true
    
 //遍历
    
 angular.forEach(myData, function(value,key){
    
 	console.log("name:"+key+", value:"+value);
    
 });

 //扩展
    
 var myExtendObject = {city:"london"};
    
 angular.extend(myExtendObject,myData);
    
 console.log(myExtendObject.weather);
    
 //复制
    
 var dataCopy = angular.copy(myData);
    
 console.log(dataCopy.weather);
    
 //删除属性或方法
    
 delete myData.name;
    
 console.log(myData.name) // undefined
    
 //判别是否拥有属性
    
 var hasName = "name" in myData;
    
 console.log(hasName) // false
    
 console.log("weather" in myData)//true

AngularJs 笔记的更多相关文章

  1. AngularJS笔记---注册服务

    在前面的笔记中,了解到AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, Angul ...

  2. AngularJS笔记--自定义指令

    在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义.  下面定 ...

  3. AngularJS笔记---路由视图

    最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...

  4. AngularJS笔记---作用域和控制器

    什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设 ...

  5. angularjs 笔记(1) -- 引导

    首先: 1,引入angularJS文件,<script type="text/javascript" src="angularjs.min.js"> ...

  6. AngularJS笔记---数据绑定

    一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 ...

  7. angularjs笔记(三)

    AngularJS API 7.其他一些常用指令,布尔类型的指令也可以用表达式 (1).数组索引$index <!DOCTYPE html> <html> <head&g ...

  8. angularjs笔记(二)

    AngularJS API 4.AngularJS过滤器 使用一个管道符(|)添加到表达式和指令中 例1.格式化字母转为大写 <!DOCTYPE html> <html> &l ...

  9. angularjs笔记(一)

    简介 AngularJS API angularjs是javascript框架,通过指令(指令就是自定义的html标签属性)扩展了HTML,并且可以通过表达式(表达式使用)绑定数据到HTML. 1.a ...

随机推荐

  1. POJ1015 && UVA - 323 ~Jury Compromise（dp路径）

    In Frobnia, a far-away country, the verdicts in court trials are determined by a jury consisting of ...

  2. Python/ MySQL练习题（一）

    Python/ MySQL练习题(一) 查询“生物”课程比“物理”课程成绩高的所有学生的学号 SELECT * FROM ( SELECT * FROM course LEFT JOIN score ...

  3. urllib.parse.urlencode

    urllib.request.urlopen(url,data,timeout) 其中如果data被赋值,则请求的方式就会由get转为post,而post需要提供一些待处理的数据. 这些待处理的数据需 ...

  4. 玩一玩基于Token的 自定义身份认证+权限管理

    使用基于 Token 的身份验证方法,在服务端不需要存储用户的登录记录.大概的流程是这样的: 客户端使用用户名跟密码请求登录 服务端收到请求,去验证用户名与密码 验证成功后,服务端会签发一个 Toke ...

  5. windows平台安装maven

    Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 一.安装maven3.5.3 安装环境(条件):Windows10.jdk1.7+ 1.下载m ...

  6. 初探arch -小白安装arch篇

    前段时间突然想试一试arch系统,电脑有点拖不动了,想想可以自己DIY自己需要的东西,就装个arch吧. 于是就马不停蹄的安装. 1.开始:用U盘制作启动盘.这里推荐低量级的制作软件USBwriter ...

  7. （hdu-4280）Island Transport~测试网络流模板速度~要加挂才能过啊

    Problem Description In the vast waters far far away, there are many islands. People are living on th ...

  8. [LeetCode] Flood Fill 洪水填充

    An image is represented by a 2-D array of integers, each integer representing the pixel value of the ...

  9. react源代码重点难点分析

    网上已经有不少react源码分析文档,但都是分析主流程和主要功能函数,没有一个是从reactDOM.render()入口开始分析源码把流程走通尤其是把复杂重要的细节环节走通直到把组件template编 ...

  10. python3 Serial 串口助手的接收读取数据

    其实网上已经有许多python语言书写的串口,但大部分都是python2写的,没有找到一个合适的python编写的串口助手,只能自己来写一个串口助手,由于我只需要串口能够接收读取数据就可以了,故而这个 ...