好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!)

废话不多说,开始!

$rootScope 和 $scope:

$rootScope是angular中最接近全局作用域的对象,是所有$scope对象的最上层!

$scope对象就是一个普通的js对象,我们可以在其上随意修改和添加属性,并且其在angular中充当数据模型,它是所有属性都可以自动呗视图访问到,但是它并不负责数据的处理和操作!

指令:将DOM元素增强为可复用的DOM组件的属性或元素

ng-app指令规定了angular的作用域,如果没有该指令angular就不会运行,只有被具有ng-app属性的DOM元素包含的元素才 会受AngularJS影响。

ng-model 该指令将输入框的值跟controller里的$scope model进行双向绑定,使用该指令实现数据绑定

ng-init 该指令在程序运行前设定一个初始值 如:

    <b ng-init='name = "Ari Lerner"'>Hello, {{ name }}</b>

ng-controller 该指令指定一个controller控制器,ng-controller声明所有被它包含的元素都属于某个控制器,并且该指令为这个DOM元素创建了一个新的$scope作用域,且将它嵌套在$rootScope内!

ng-click 该指令给DOM元素注册一个点击事件监听器,可以在点击触发表达式的内容,也可以调用在controller中绑定在$scope上的函数

ng-repeat 该指令遍历一个数据集中的每个元素,可以使用p in arr来变量数组或对象中的每个值,或者用(name, val) in object来遍历对象中的属性名和值

表达式:

表达式一般是指{{}}中的部分

        • 所有表达式都在scope这个context里被执行,因此可以使用所有本地 $scope 中的变量。

        • 如果一个表达式的执行导致类型错误或引用错误,这些错误将不会被抛出。

        • 表达式里不允许任何控制函数流程的功能(如if/else等条件语句)

        • 表达式可接受一个或多个串联起来的过滤器。

模块:

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

angular.module(’name’, [ ])

注意:

在angular中使用对象属性代替使用对象本身来进行数据绑定是最佳体验,如:

在html中用{{test.nam}}替换{{name}},在controller里用$scope.test = {name: ‘value’}代替$scope.name = “value”;这里主要是用对象的引用传递来代替变量值传递

控制器:

通过ng-controller指令在DOM中指定控制器,并且控制器之间是可以进行嵌套的,子控制器通过原型继承来继承父控制器中的属性,方法等!注意,在控制器中进行dom操作并不是好的实践,尽可能保持控制器的短小精悍!

app.controller('my', ['$scope', '$filter', function($scope, $filter) {
    $scope.test = {name : 11};
}])

过滤器:

在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如:

{{ name | uppercase }}//转换成大写

自定义过滤器:(string只留a-zA-Z字符串)

 app.filter('string', function() {
      return function(input) {
           if(input)
               return (input+"").replace(/\d*\W*/g, '');
      }
})//这里的input为输入的字符串

 
 
路由:
var app = angular.module(‘app’, [
’ngRoute’, ‘appCtrl'
]) app.config(function($routeProvider) {
$routeProvider.when(‘/index’, {
templateUrl: ’tuples/index.html’,
controller: ‘indexCtrl'
}).otherwise({
redirectTo: ‘/index'
})
})

  

 
 
服务:
var app = angular.module(‘app’, []);
app.factory(‘myService’, [‘$http’, function($http) {
var doRequest = function() {}
return {
mot: functions(name) {
return doRequest()
}
}
}])

  

angular.js学习笔记--概念总结的更多相关文章

  1. Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  2. Angular.js 学习笔记

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...

  3. Angular JS 学习笔记(二)

    1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定 ...

  4. Angular JS 学习笔记(一)

    1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net ...

  5. Angular.js学习笔记(三)

    一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...

  6. Angular.js学习笔记 (二)

    用A链接对象解析url的组成 var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name'; var aLink = document.cr ...

  7. Angular.js学习笔记 (一)

    - angular中最重要的概念是指令(directive)- ng-model 是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的[user.name]建立绑定关系### 模块(Mo ...

  8. angular.js学习笔记:实现商品价格计算实例

    <!DOCTYPE html> <html lang="en" ng-app> <!-- ng-app:初始化的指令 也可以解析局部--> &l ...

  9. angular.js学习笔记(二)

    1.安装core ,shared模块 ng g m core  ng g m shared 2.在shared中导入core模块   core模块只加载一次所以将公共组件放到core中 3.创建公共组 ...

随机推荐

  1. Spring AOP获取拦截方法的参数名称跟参数值

    注意:这种方式需要JDK1.8版本支持 开始:http://www.cnblogs.com/wing7319/p/9592184.html 1.aop配置: <aop:aspectj-autop ...

  2. 从马文到AlphaGo AI走过了怎样的70年?

    (原标题:从马文·明斯基到AlphaGo,人工智能走过了怎样的70年?) [编者按]从19世纪中叶人工智能的萌芽时期,到现今人工智能的重生,从马文·明斯基到AlphaGo,历史上发生了哪些激动人心的故 ...

  3. Linux 命令 及 简单操作 学习

    众所周知,linux命令很多很多,但是,请不用担心,相信你自己不断的积累,终有一天你和你和小伙伴都会为你惊呆的...... 废话不多说,那,什么时候动手????---------现在,马上..... ...

  4. Android 使用WebView加载含有Canvas的页面截屏处理

    无法截屏主要原因是webview渲染方式所导致:只需要AndroidManifest.xml中设置属性Android:hardwareAccelerated=”false”.

  5. 在代码中设置RelativeLayout布局中标签的android:layout_toLeftOf、android:layout_toRightOf等属性

    需要动态改变RelativeLayout里面控件的相对位置,经一个技术群的群友提示,找到了如下的方法,做下记录:   RelativeLayout.Layoutparams params = (Rel ...

  6. 开源CFD并非万金油

    今天有网友在群里讨论开发CFD软件的事情,众说纷纭,有网友提到"没有必要开发CFD软件了,直接使用开源OpenFOAM就行".但个人认为这说法还是有一些需要商榷的地方,开源软件也不 ...

  7. SSH免登录及原理

    1.免登陆实现 1)在本机生成公钥/私钥对 ssh-keygen 执行成功后,在.ssh文件夹下,会多出两个文件 id_rsa和id_rsa.pub 2)将公钥写入远端服务器.ssh文件夹下的auth ...

  8. 【Python】python3.6中实现同一行动态输出

    print同时需要设置flush=True来动态显示 print("\r[{0}] {1} <- {2}".format(username,time,jdTimeFomat) ...

  9. Java知多少(23)类的基本运行顺序

    我们以下面的类来说明一个基本的 Java 类的运行顺序: public class Demo{ private String name; private int age; public Demo(){ ...

  10. Mysql系列九:使用zookeeper管理远程Mycat配置文件、Mycat监控、Mycat数据迁移(扩容)

    一.使用zookeeper管理远程Mycat配置文件 环境准备: 虚拟机192.168.152.130: zookeeper,具体参考前面文章 搭建dubbo+zookeeper+dubboadmin ...