angular1

AngularJS

数字

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： {{ quantity * cost }}</p>
</div><div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： <span ng-bind="quantity * cost"></span></p>
</div>

字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div><div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

AngularJS 对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
</div><div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 <span ng-bind="person.lastName"></span></p>
</div>

AngularJS 数组

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div><div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 <span ng-bind="points[2]"></span></p>
</div>

数据绑定

<div ng-app="" ng-init="quantity=1;price=5"><h2>价格计算器</h2>数量： <input type="number"    ng-model="quantity">
价格： <input type="number" ng-model="price"><p><b>总价：</b> {{ quantity * price }}</p></div>

循环数组

<div ng-app="" ng-init="names=['Jani','Hege','Kai']"><p>使用 ng-repeat 来循环数组</p><ul><li ng-repeat="x in names">{{ x }}</li></ul>
</div><div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul><li ng-repeat="x    in names">{{ x.name + ', ' + x.country }}</li>
</ul>
</div>

创建自定义的指令

<body ng-app="myApp"><runoob-directive></runoob-directive>
<div runoob-directive></div><script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {return {template : "<h1>自定义指令!</h1>"};
});
</script></body>

ng-model 指令

<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {$scope.name = "John Doe";
});
</script>

验证用户输入

<form ng-app="" name="myForm">Email:<input type="email" name="myAddress" ng-model="text"><span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

状态

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p></form>

输入变化

<style>
input.ng-invalid {background-color: #ccc;
}
</style>
</head>
<body><form ng-app="" name="myForm">输入你的名字:<input name="myName" ng-model="myText" required>
</form>

scope

<div ng-app="myApp" ng-controller="myCtrl"><input ng-model="name"><h1>{{greeting}}</h1><button ng-click='sayHello()'>点我</button>   
</div><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {$scope.name = "Runoob";$scope.sayHello = function() {$scope.greeting = 'Hello ' + $scope.name + '!';};
});
</script>

rootScope

<div ng-app="myApp" ng-controller="myCtrl"><h1>{{lastname}} 家族成员:</h1><ul><li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul></div><script>
var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $rootScope) {$scope.names = ["Emil", "Tobias", "Linus"];$rootScope.lastname = "Refsnes";
});
</script>

控制器方法

<div ng-app="myApp" ng-controller="personCtrl">名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}</div><script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {$scope.firstName = "John";$scope.lastName = "Doe";$scope.fullName = function() {return $scope.firstName + " " + $scope.lastName;}
});
</script>

外部控制器文件

<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}</div>
<script src="personController.js"></script>personController.js
angular.module('myApp', []).controller('namesCtrl', function($scope) {$scope.names = [{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}];
});

过滤器

<div ng-app="myApp" ng-controller="personCtrl"><p>姓名为 {{ lastName | uppercase }}</p>
<p>姓名为 {{ lastName | lowercase }}</p>
<input type="number" ng-model="quantity">
<input type="number" ng-model="price"><p>总价 = {{ (quantity * price) | currency }}</p>
</div>

过滤循环

<div ng-app="myApp" ng-controller="namesCtrl"><ul><li ng-repeat="x in names | orderBy:'country'">{{ x.name + ', ' + x.country }}</li><li ng-repeat="x in names | filter:test | orderBy:'country'">{{ (x.name | uppercase) + ', ' + x.country }}</li>
</ul></div>

自定义过滤器

<div ng-app="myApp" ng-controller="myCtrl">
姓名: {{ msg | reverse }}
</div><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖return function(text) {return text.split("").reverse().join("");}
});
</script>

$location

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {$scope.myUrl = $location.absUrl();
});

$http

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {$http.get("welcome.htm").then(function (response) {$scope.myWelcome = response.data;});
});$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {$http({method: 'GET',url: 'https://www.runoob.com/try/angularjs/data/sites.php'}).then(function successCallback(response) {$scope.names = response.data.sites;}, function errorCallback(response) {// 请求失败执行代码});});

$timeout

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {$scope.myHeader = "Hello World!";$timeout(function () {$scope.myHeader = "How are you today?";}, 2000);
});

$interval

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {$scope.theTime = new Date().toLocaleTimeString();$interval(function () {$scope.theTime = new Date().toLocaleTimeString();}, 1000);
});

自定义服务

app.service('hexafy', function() {this.myFunc = function (x) {return x.toString(16);}
});
app.controller('myCtrl', function($scope, hexafy) {$scope.hex = hexafy.myFunc(255);
});

过滤器自定义服务

app.filter('myFormat',['hexafy', function(hexafy) {return function(x) {return hexafy.myFunc(x);};
}]);
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

select

<div ng-app="myApp" ng-controller="myCtrl"><p>选择网站:</p><select ng-model="selectedSite" ng-options="x.site for x in sites"></select><h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p></div><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {$scope.sites = [{site : "Google", url : "http://www.google.com"},{site : "Runoob", url : "http://www.runoob.com"},{site : "Taobao", url : "http://www.taobao.com"}];
});
</script>

select repeat

<div ng-app="myApp" ng-controller="myCtrl"><p>选择网站:</p><select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option></select><h1>你选择的是: {{selectedSite}}</h1>
</div><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {$scope.sites = [{site : "Google", url : "http://www.google.com"},{site : "Runoob", url : "http://www.runoob.com"},{site : "Taobao", url : "http://www.taobao.com"}];
});
</script>

表格

<div ng-app="myApp" ng-controller="customersCtrl"> <table style="border:1px solid red"><tr ng-repeat="x in names"><td>{{ x.Name }}</td><td>{{ x.Country }}</td></tr>
</table></div><script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {$http.get("/try/angularjs/data/Customers_JSON.php").then(function (result) {$scope.names = result.data.records;});
});
</script>

orderBy uppercase $index$ odd $even

<table><tr ng-repeat="x in names | orderBy : 'Country'"><td>{{ $index + 1 }}</td><td>{{ x.Name }}</td><td>{{ x.Country }}</td><td>{{ x.Country | uppercase }}</td><td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td><td ng-if="$even">{{ x.Name }}</td><td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td><td ng-if="$even">{{ x.Country }}</td></tr>
</table>

ng-disabled

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按钮
</p>
<p>
{{ mySwitch }}
</p>
</div>

show

<div ng-app=""  ng-init="hour=13">
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
<p ng-show="hour > 12">我是可见的。</p>
<p ng-hide="true">我是不可见的。</p>
<p ng-hide="false">我是可见的。</p>

ng-click

<div ng-app="myApp" ng-controller="myCtrl"><button ng-click="count = count + 1">点我！</button><p>{{ count }}</p></div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {$scope.count = 0;
});
</script><form>Check to show a header:<input type="checkbox" ng-model="myVar">选择一个选项:<input type="radio" ng-model="myVar" value="dogs">Dogs<input type="radio" ng-model="myVar" value="tuts">Tutorials<input type="radio" ng-model="myVar" value="cars">Cars选择一个选项:
<select ng-model="myVar"><option value=""><option value="dogs">Dogs<option value="tuts">Tutorials<option value="cars">Cars
</select>
</form><h1 ng-show="myVar">My Header</h1>
<div ng-switch="myVar"><div ng-switch-when="dogs"><h1>Dogs</h1><p>Welcome to a world of dogs.</p></div><div ng-switch-when="tuts"><h1>Tutorials</h1><p>Learn from examples.</p></div><div ng-switch-when="cars"><h1>Cars</h1><p>Read about cars.</p></div>
</div>

表单

<div ng-app="myApp" ng-controller="formCtrl"><form novalidate>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></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();
});
</script>

表单验证

<p>用户名:<br><input type="text" name="user" ng-model="user" required><span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"><span ng-show="myForm.user.$error.required">用户名是必须的。</span></span>
</p><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><p><input type="submit"ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||myForm.email.$dirty && myForm.email.$invalid">
</p></form><script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {$scope.user = 'John Doe';$scope.email = 'john.doe@gmail.com';
});
</script>

api

    <input type="text" ng-model="myInput" ng-blur="blur()"><p>输入的内容为：{{myInput}}</p><p>变成小写：{{ x1 }}</p><p>变成大写：{{ x2 }}</p><p ng-switch = "x3">是不是字符串：<label ng-switch-when = "true">是</label><label ng-switch-when = "false">不是</label><label ng-switch-when = ""></label></p><p ng-switch = "x4">是不是数字：<label ng-switch-when = "true">是</label><label ng-switch-when = "false">不是</label><label ng-switch-when = ""></label></p>
</div>
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString()  判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()  判断给定的对象是否为数字，如果是返回 true。
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {$scope.blur = function(){$scope.x1 = angular.lowercase($scope.myInput);$scope.x2 = angular.uppercase($scope.myInput);$scope.x3 = angular.isString($scope.myInput);// angular.isNumber 这里无效// $scope.x4 = angular.isNumber($scope.myInput);$scope.x4 = !isNaN($scope.myInput);}
});
</script></body>

与bootstrap整合

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl"><div class="container"><h3>Users</h3><table class="table table-striped"><thead><tr><th>编辑</th><th>名</th><th>姓</th></tr></thead><tbody><tr ng-repeat="user in users"><td><button class="btn" ng-click="editUser(user.id)"><span class="glyphicon glyphicon-pencil"></span>编辑</button></td><td>{{ user.fName }}</td><td>{{ user.lName }}</td></tr></tbody>
</table><hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>创建新用户
</button>
<hr><h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3><form class="form-horizontal"><div class="form-group"><label class="col-sm-2 control-label">名:</label><div class="col-sm-10"><input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名"></div></div> <div class="form-group"><label class="col-sm-2 control-label">姓:</label><div class="col-sm-10"><input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓"></div></div><div class="form-group"><label class="col-sm-2 control-label">密码:</label><div class="col-sm-10"><input type="password" ng-model="passw1" placeholder="密码"></div></div><div class="form-group"><label class="col-sm-2 control-label">重复密码:</label><div class="col-sm-10"><input type="password" ng-model="passw2" placeholder="重复密码"></div></div>
</form><hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>修改
</button></div><script src="myUsers.js"></script>

包含

跨域包含

<div ng-include="'http://c.runoob.com/runoobtest/angular_include.php'"></div><script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {$sceDelegateProvider.resourceUrlWhitelist(['http://c.runoob.com/runoobtest/**']);
});
</script>

动画

<body ng-app="myApp"><h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1><div ng-hide="myCheck"></div><script>
var app = angular.module('myApp', ['ngAnimate']);
</script>mainApp.constant("configParam", "constant value");
// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);

依赖注入factory

   <body><h2>AngularJS 简单应用</h2><div ng-app = "mainApp" ng-controller = "CalcController"><p>输入一个数字: <input type = "number" ng-model = "number" /></p><button ng-click = "square()">X<sup>2</sup></button><p>结果: {{result}}</p></div><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script><script>var mainApp = angular.module("mainApp", []);mainApp.value("defaultInput", 5);mainApp.factory('MathService', function() {var factory = {};factory.multiply = function(a, b) {return a * b;}return factory;});mainApp.service('CalcService', function(MathService){this.square = function(a) {return MathService.multiply(a,a);}});mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {$scope.number = defaultInput;$scope.result = CalcService.square($scope.number);$scope.square = function() {$scope.result = CalcService.square($scope.number);}});</script>

依赖注入provider

   <body><h2>AngularJS 简单应用</h2><div ng-app = "mainApp" ng-controller = "CalcController"><p>输入一个数字: <input type = "number" ng-model = "number" /></p><button ng-click = "square()">X<sup>2</sup></button><p>结果: {{result}}</p></div><script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script><script>var mainApp = angular.module("mainApp", []);mainApp.config(function($provide) {$provide.provider('MathService', function() {this.$get = function() {var factory = {};factory.multiply = function(a, b) {return a * b;}return factory;};});});mainApp.value("defaultInput", 5);mainApp.service('CalcService', function(MathService){this.square = function(a) {return MathService.multiply(a,a);}});mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {$scope.number = defaultInput;$scope.result = CalcService.square($scope.number);$scope.square = function() {$scope.result = CalcService.square($scope.number);}});</script>

路由

<h2>AngularJS 路由应用</h2>
<ul><li><a href="#/">首页</a></li><li><a href="#/computers">电脑</a></li><li><a href="#/printers">打印机</a></li><li><a href="#/blabla">其他</a></li>
</ul><div ng-view></div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>angular.module('routingDemoApp',['ngRoute']).config(['$routeProvider', function($routeProvider){$routeProvider.when('/',{template:'这是首页页面'}).when('/computers',{template:'这是电脑分类页面'}).when('/printers',{template:'这是打印机页面'}).otherwise({redirectTo:'/'});}]);
</script>$routeProvider.when(url, {template: string,templateUrl: string,controller: string, function 或 array,controllerAs: string,redirectTo: string, function,resolve: object<key, function>
});参数说明：template:
如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：
.when('/computers',{template:'这是电脑分类页面'})templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
$routeProvider.when('/computers', {templateUrl: 'views/computers.html',
});
以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。controller:
function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。controllerAs:
string类型，为controller指定别名。redirectTo:
重定向的地址。resolve:
指定当前controller所依赖的其他模块。

路由2

<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {$routeProvider.when('/home', {templateUrl: 'embedded.home.html',controller: 'HomeController'}).when('/about', {templateUrl: 'embedded.about.html',controller: 'AboutController'}).otherwise({redirectTo: '/home'});
});
</script></head><body ng-app="ngRouteExample" class="ng-scope"><script type="text/ng-template" id="embedded.home.html"><h1> Home </h1></script><script type="text/ng-template" id="embedded.about.html"><h1> About </h1></script><div> <div id="navigation">  <a href="#/home">Home</a><a href="#/about">About</a></div><div ng-view=""></div></div>
</body>

应用

<textarea ng-model="message" cols="40" rows="10"></textarea><p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p><p>剩余字数: <span ng-bind="left()"></span></p><script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>"myNoteApp.js":
var app = angular.module("myNoteApp", []);"myNoteCtrl.js":
app.controller("myNoteCtrl", function($scope) {$scope.message = "";$scope.left  = function() {return 100 - $scope.message.length;};$scope.clear = function() {$scope.message = "";};$scope.save  = function() {alert("Note Saved");};
});

指令

指令	描述
ng-app 定义应用程序的根元素。
ng-bind	绑定 HTML 元素到应用程序数据
ng-bind-html	绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-bind-template	规定要使用模板替换的文本内容
ng-blur	规定 blur 事件的行为
ng-change	规定在内容改变时要执行的表达式
ng-checked	规定元素是否被选中
ng-class	指定 HTML 元素使用的 CSS 类
ng-class-even	类似 ng-class，但只在偶数行起作用
ng-class-odd	类似 ng-class，但只在奇数行起作用
ng-click	定义元素被点击时的行为
ng-cloak	在应用正要加载时防止其闪烁
ng-controller	定义应用的控制器对象
ng-copy	规定拷贝事件的行为
ng-csp	修改内容的安全策略
ng-cut	规定剪切事件的行为
ng-dblclick	规定双击事件的行为
ng-disabled	规定一个元素是否被禁用
ng-focus	规定聚焦事件的行为
ng-form	指定 HTML 表单继承控制器表单
ng-hide	隐藏或显示 HTML 元素
ng-href	为 the 元素指定链接
ng-if	如果条件为 false 移除 HTML 元素
ng-include	在应用中包含 HTML 文件
ng-init	定义应用的初始化值
ng-jq	定义应用必须使用到的库，如：jQuery
ng-keydown	规定按下按键事件的行为
ng-keypress	规定按下按键事件的行为
ng-keyup	规定松开按键事件的行为
ng-list	将文本转换为列表 (数组)
ng-model	绑定 HTML 控制器的值到应用数据
ng-model-options	规定如何更新模型
ng-mousedown	规定按下鼠标按键时的行为
ng-mouseenter	规定鼠标指针穿过元素时的行为
ng-mouseleave	规定鼠标指针离开元素时的行为
ng-mousemove	规定鼠标指针在指定的元素中移动时的行为
ng-mouseover	规定鼠标指针位于元素上方时的行为
ng-mouseup	规定当在元素上松开鼠标按钮时的行为
ng-non-bindable	规定元素或子元素不能绑定数据
ng-open	指定元素的 open 属性
ng-options	在列表中指定
ng-paste	规定粘贴事件的行为
ng-pluralize	根据本地化规则显示信息
ng-readonly	指定元素的 readonly 属性
ng-repeat	定义集合中每项数据的模板
ng-selected	指定元素的 selected 属性
ng-show	显示或隐藏 HTML 元素
ng-src	指定元素的 src 属性
ng-srcset	指定元素的 srcset 属性
ng-style	指定元素的 style 属性
ng-submit	规定 onsubmit 事件发生时执行的表达式
ng-switch	规定显示或隐藏子元素的条件
ng-transclude	规定填充的目标位置
ng-value	规定 input 元素的值

AngularJS 事件

AngularJS 支持以下事件:
ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change

AngularJS 验证属性
$dirty$ invalid
$error

转换

API	描述
angular.lowercase()	将字符串转换为小写
angular.uppercase()	将字符串转换为大写
angular.copy()	数组或对象深度拷贝
angular.forEach()	对象或数组的迭代函数

比较

API	描述
angular.isArray()	如果引用的是数组返回 true
angular.isDate()	如果引用的是日期返回 true
angular.isDefined()	如果引用的已定义返回 true
angular.isElement()	如果引用的是 DOM 元素返回 true
angular.isFunction()	如果引用的是函数返回 true
angular.isNumber()	如果引用的是数字返回 true
angular.isObject()	如果引用的是对象返回 true
angular.isString()	如果引用的是字符串返回 true
angular.isUndefined()	如果引用的未定义返回 true
angular.equals()	如果两个对象相等返回 true

JSON

API	描述
angular.fromJson()	反序列化 JSON 字符串
angular.toJson()	序列化 JSON 字符串

基础

API	描述
angular.bootstrap()	手动启动 AngularJS
angular.element()	包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。
angular.module()	创建，注册或检索 AngularJS 模块

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

模块化的发展历程
JS模块化模块化的理解非模块化的问题模块化的优点模块化的发展历程模块化规范 AMD : 浏览器端 CMD : 浏览器端 ES6模块化总结 AMD和CMD区别： JS模块化 (工程化和项目管理) 模块化的理解什么是模块？ 将一个复杂的程序依据一定的规则(规范)封装成几…...
2024/4/21 4:05:37
十分钟带你入门angular
angular是干什么的它可以轻松构建SPA(单一页面应用程序) 只有一个页面（整个应用的载体）内容全部是由ajax方式呈现出来的传统的网页开发：会有很多页面放在服务器端，比如说log-in.html ，sign-in.html之类的使用angular&…...
2024/4/21 4:05:37
【个人笔记重点，不作为参考】主题：angular2.0笔记
总结： 1、NgModule装饰元数据 2、constructor(private service: HeroService) { } //用于组件内。重点： Angular会以这些服务为参数去调用组件的构造函数。这就是依赖注入。 3.我们倾向于让组件保持精简。组件本身不从服务器获得数据、不进行验证输入…...
2024/5/1 0:14:10
使用ngUpgrade将AngularJS服务迁移到Angular
In our last guide, we covered how to install everything we need to get started with upgrading from AngularJS to Angular. We also covered the basics of rewriting and downgrading components. 在上一指南中 ，我们介绍了如何安装从AngularJS升级到Angular…...
2024/4/21 4:05:34
CDN：BootCDN
ylbtech-CDN：BootCDNBootCDN稳定、快速、免费的前端开源项目 CDN 加速服务共收录了 3351 个前端开源项目 1. 推荐返回顶部 1、bootstrap Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 123321react React 是用于…...
2024/4/20 13:11:35
angular.js入门汇总（上）
总体把握 angular.js5大核心： 1，mvc模式 2，双向数据绑定 3，依赖注入 4，模块系统 5，指令系统 mvc模式： function app($scope){ $scope.name"bob"; //这是mvc中的model }…...
2024/4/21 4:05:33
angular ts文件引用图片
angular ts文件引用图片1. 在函数值中以字符串形式加img标签，并正确添加图片路径即可。1. 在函数值中以字符串形式加img标签，并正确添加图片路径即可。...
2024/4/21 4:05:31
ng 点击按钮下载文件
const a document.createElement(a); // 创建a标签 document.body.appendChild(a); // 向body里面添加a标签 a.setAttribute(style, display:none); // a 标签样式隐藏 a.setAttribute(href, location.protocol // location.host url); // 拼接url，（…...
2024/4/21 4:05:30
Angular4 组件通讯方法大全
组件通讯，意在不同的指令和组件之间共享信息。如何在两个多个组件之间共享信息呢。最近在项目上，组件跟组件之间可能是父子关系，兄弟关系，爷孙关系都有。。。。。我也找找了很多关于组件之间通讯的方法，不同的方法应用…...
2024/4/21 4:05:30
angular 兄弟组件通信-服务注入
1、创建服务xx.service.ts import { Injectable } from angular/core; import { Subject } from rxjs;Injectable({providedIn: root }) export class FileCheckService {public check$: Subject<string>;constructor() {this.check$ new Subject<string>();}fil…...
2024/4/21 4:05:29
angular7中非父子组件间的通讯
方式一：通过service 传递数据的组件： header.component.ts constructor(private headerHomeData: HeaderHomeDataService ) { }// 每次更改下拉框将数据传递给服务 selectModeChange(e: any) {this.selectIsOpen false;this.headerHomeData.fertilizerS…...
2024/4/21 11:51:34
Angular组件——父子组件通讯
Angular组件间通讯组件树，1号是根组件AppComponent。组件之间松耦合，组件之间知道的越少越好。组件4里面点击按钮，触发组件5的初始化逻辑。传统做法：在按钮4的点击事件里调用组件5的方法。紧密耦合。 Angular：在组…...
2024/4/20 19:55:25
Angular组件间通讯
1.1 组件的输入属性父子组件父组件–>子组件 1 1.1生成子组件 –> ng g component order order.component.ts import {Component, Input, OnInit} from angular/core;Component({selector: app-order,templateUrl: ./order.component.html,styleUrls: [./order.com…...
2024/4/20 12:27:33
angular组件传值服务器,Angular中不一样的组件间传值与通讯的方法
主要分为父子组件和非父子组件部分。app父子组件间参数与通信方法this使用事件通讯(EventEmitter，Output)：spa场景：能够在父子组件之间进行通讯，通常使用在子组件传递消息给父组件；.net步骤：设计子组件建立…...
2024/4/20 19:55:22
Angular 组件通讯、生命周期钩子小结
本文为原创，转载请注明出处： cnzt 文章：cnzt-p http://www.cnblogs.com/zt-blog/p/7986858.html http://www.cnblogs.com/zt-blog/p/7986858.html 组件接受参数： 1. 路由查询参数（ActivatedRoute：参数…...
2024/4/20 19:55:21
angular4 组件间通讯
1.父→子 input parent.ts import { Component } from angular/core;Component({selector: page-parent,templateUrl: parent.html, }) export class ParentPage {i: number 0;constructor() {setInterval(() > {this.i;}, 1000)} } parent.html <ion-header><ion…...
2024/5/3 14:18:33
让ng-model支持angular内置的filter date功能
背景: angular filter 常见于和ng-bind、差值表达式、ng-repeat 配合转换后端 unix 时间戳. 但 filter 不支持和 ng-model 一起使用. 解决思路: 通过angular directive 结合 $filter服务封装一个支持转换 ng-model中时间戳为指定格式的指令. 代码如下: app.directive(dateFor…...
2024/4/28 12:38:29
Angular07 利用angular打造管理系统页面
1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目：点击前往将AdminLTE项目的精简版本源代码复制到adminSystem应用主模块的主组件的模板中 AdminLTE项目的精简版本效果图 <…...
2024/4/30 22:02:57
Angular JS学习笔记
Angular JS APIhttp://docs.angularjs.org/api/ 加载：1、<html data-ng-app>2、window.onload function () {angular.bootstrap(document, [FnDirective]); //加载dom 和 module}; 例子：<!doctype html><html ng-app><head>&…...
2024/4/21 4:05:24
Observables and Reactive Programming in Angular 2
原文链接：http://blog.rangle.io/observables-and-reactive-programming-in-angular-2/ Observables and Reactive Programming in Angular 2 Written by Tyler Borchert08 April 2016 <p><strong>This post was last updated 04/08/2016. Please refer…...
2024/4/20 17:07:37