js框架——angular.js
这是一个前端用的框架，使用简单。详细介绍这里就不写了，主要介绍其语法和作用——
1. 声明一个angular
如果想要使用一个angular代码，则需要在【想要使用angular的范围内写上ng-app】，例如，对象是整个body内容的话，就需要在body标签内添加——
<body ng-app>
就和添加一个属性差不多的语法方式，不要多想
2. angular的使用
<p>这是我们第一次接触ag的表达式 {{1 + 2}}</p>
以上代码是angular的表达式，在｛｛｝｝中的部分代表视图——即显示部分，这里主要会显示各种需要呈现的数据，而且里面也可以写上表达式，如上图。
一般的，都是：
<p>Hello {{name }}!</p>
代表显示这个name变量，如果后台设定了name等于3，或者"ajaja"，那么执行之后就会显示3或者"ajaja"。
3. 过滤器
所谓过滤，就是将一种东西，通过某种规律，规则，转换成另一种东西。例如污水过滤，就是将污水，通过【过滤杂质】这一规则，转换成【干净的水】，重要的是转换和转换规则。
angular的过滤，就是这么一个转换的规则：
<p>Hello {{name| uppercase }}!</p>
这句话的意思，是输出name变量，并且将其转为大写方式。
过滤可以同时使用多种：
<p>Hello {{name| uppercase|lowercas }}!</p>
过滤的规则有多种。
4. ｛｛｝｝使用范围
我们可以在一个标签内使用｛｛｝｝作为视图输出各种东西，如
<p>Hello {{name| uppercase }}!</p>
而同样，我们也可以在【标签上面使用{{}}】，如
<p class="{{name}}">Hello {{name| uppercase }}!</p>
如果name的值是user，那么就会输出——
USER，且带有user类的css样式。
5. 模块定义
app一般一个网页只定义一个，毕竟多了即无用也不好用。
要使用app就必须使用模块。。
定义的方式：
var app = angular.module("MyApp", []);
Myapp是这个文档app的值，上面没有写，其实应该是有一个值的，例如
<body ng-app="thisapp">
如此，这个thisapp就是上面的MyApp了，通过这句话声明一个模块出来，然后构造各种东西进去。
6. 控制器
控制器类似于小型的js文件，它们专门负责某一块代码的js构造。一个文档中可以有多个控制器，每个控制器可以有不同的功能。使用控制器，要在标签上声明，并给予名称——
<div ng-controller="MyCtrl">
<p>{{value}}</p>
</div>
给予名称之后，就可以在后台js文件上写上各种东西了，例如——
function MyCtrl($scope) {
$scope.value = "some value";
}
可以看到，结果为some value。
7. ng-init初始化程序
init用于初始化数据，例如：
<div ng-controller="MyCtrl">
<p ng-init="incrementValue(5)">{{value}}</p>
</div>
function MyCtrl($scope) {
$scope.value = 1;
$scope.incrementValue = function(value) {
$scope.value += value;
};
}
返回的结果是2，说明这个函数自动执行了。这就是初始化。
8. ｛｛｝｝还能塞什么
这个里面其实还能塞函数：
<div ng-controller="MyCtrl">
<p>{{getvalue()}}</p>
</div> function MyCtrl($scope) {
$scope.value = 1;
$scope.newvalue = 2;
$scope.getIncrementedValue = function() {
return $scope.value + 1;
};
$scope.getvalue = function(){
return $scope.newvalue;
}
}
9.监听
使用model可以随时让模型和视图同步更新——
<div ng-controller="MyCtrl">
<input type="text" ng-model="name" placeholder="Enter your name">
<p>{{greeting}}</p>
</div> function MyCtrl($scope) {
$scope.name = "";
//监听该模块作用域中名字的变化
$scope.$watch("name", function(newValue, oldValue) {
if (newValue.length > 0) {
$scope.greeting = "Greetings " + newValue;
}
});
}
上面的name是模块的名称，$scope.$watch是监听函数，它监听的对象是name模块，然后执行后面的函数。
当name中数据发生改动的时候触发。
10. 模块嵌套
模块也是可以嵌套的用的，就和对象的嵌套一样。遵循的规则也差不多，外面的模块不能调用里面的变量，里面的模块可以调用外面的变量——
.nested {
border: 1px solid red;
margin-left: 2em;
padding: 1em;
}
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Object</label>
<input type="text" ng-model="user.name">
<div class="nested" ng-controller="MyNestedCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Primitive with explicit $parent reference</label>
<input type="text" ng-model="$parent.name">
<label>Object</label>
<input type="text" ng-model="user.name">
</div>
</div>
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope) {
$scope.name = "Peter";
$scope.user = {
name: "Parker"
};
});
app.controller("MyNestedCtrl", function($scope) {
//内嵌入的一个控制层,
//内嵌入的一个作用域，一层一层往上找
$scope.name = "gyfnice"
});
11. 循环
指令ng-repeat表示循环，循环的范围是指令所在的标签之间所有内容
<ul ng-repeat="user in users">
<li>{{user}}</li>
</ul>
app.controller("MyCtrl", function($scope) {
$scope.users = ["Peter", "Daniel", "Nina"];
});
如此，就会返回三个li——
<li>Peter</li>
<li>Danel</li>
<li>Nina</li>
js框架——angular.js的更多相关文章
- js框架——angular.js(6)
1. ng-class 这个指令是用来绑定一个或者多个css代码.它的值一般是一个表达式,也可以是函数什么的,只要返回的确实是一个类的名字就可以—— ng-class="nextPageDi ...
- js框架——angular.js（5）
1. 3种过滤方式 <html> <head> <meta charset='utf-8'> <script src="js/angular.js& ...
- js框架——angular.js（2）
1. 模块的利用扩充 模块的名称也可以当做变量使用,例如: <body ng-app> <label><input type="checkbox" n ...
- js框架——angular.js(4)
1. angular中的对象 其实也不用多说的,前台是可以提取后台定义的对象的—— <body ng-app="MyApp"> <div ng-controlle ...
- js框架——angular.js（3）
1. 过滤filter 过滤就是将内容进行筛选或者转换或者两者都有,一般的表示方式就是在变量后面添加"|",然后加上过滤条件,如—— {{name|currency}} 这个cur ...
- 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步
Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...
- Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap
转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...
- vue.js与angular.js的区别（个人）
刚进入实训 讲师就要发一些什么比较高大上的东西,本人才疏学浅 浅浅的分享一下angularjs 和vue.js的区别.只是简单的理解一下 大神勿喷. 生实训之前学习的angular.js 只是理解了 ...
- Angular JS - 5 - Angular JS 模块和控制器
1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...
随机推荐
- 在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
答案: 伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们.典型的是函数的argument参数,还有像调用getElementsByTa ...
- python学习入门第一天总结
虽然之前自己也看过许多关于python的视频,但一直没有动力与勇气,所以未能坚持且也没有学得这么深刻,这次希望通过python自动化培训,能够彻底改变自己,通过第一天的python学习,自己学到了许多 ...
- 洛谷-小鱼会有危险吗-BOSS战-入门综合练习2
题目描述 Description 有一次,小鱼要从A处沿直线往右边游,小鱼第一秒可以游7米,从第二秒开始每秒游的距离只有前一秒的98%.有个极其邪恶的猎人在距离A处右边s米的地方,安装了一个隐蔽的探测 ...
- MVC view视图获取Html.RenderAction方式带来的参数
通过Html.RenderAction这种方式传递的参数,在view视图中获取要使用viewContext上下文来获取:Html.ViewContext.RouteData.Values[" ...
- log4j2配置MDC分线程写日志
1.MDC是一个高级一些的工具,可以配置分用户(userid)写日志,也可以分线程 2.方法和道理都是相似的,在写入日志之前配置线程名或者用户id 3.如果将线程名配置为目录,可以将不同线程的日志输送 ...
- [转]深入浅出JSONP--解决ajax跨域问题
取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序中 ...
- mybatis----增删改查
转: select使用 : xml代码: <!-- 查询学生,根据id --> <select id="getStudent" parameterType=&qu ...
- 快速切换天财商龙门店后台.VB6.0
名称:快速切换天财商龙门店后台 作者:landv 时间:2015年8月21日 功能:快速切换天财商龙门店后台 环境:VB6.0 注:懒的一行一行修改文件了,直接覆盖配置文件,Tcgem.ini 只能反 ...
- 第三十二节，datetime时间模块
首先要引入import datetime时间模块 datetime.date.today()模块函数 功能:输出系统年月日输出格式 2016-01-26[无参] 使用方法:datetime.date. ...
- html 任意表格
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> ...