angularjs学习使用分享

angularjs是一个为动态web应用设计的结构框架,它是为了克服html在构建应用上的不足而设计的。

工作原理:

1 加载html,然后解析成DOM;

2 加载angular.js脚本;

3 AngularJS等待DOMContentLoaded事件的触发;

4 AngularJS寻找ng-app指令,根据这个指令确定应用程序的边界;

5 使用ng-app中指定的模块配置$injector;

6 使用$injector创建$compile服务和$rootScope;

7 使用$compile服务编译DOM并把它链接到$rootScope上;

8 ng-init指令对scope里面的变量name进行赋值;

9 对表达式{{name}}进行替换,于是乎,显示value

两大特性:数据双向绑定、依赖注入;

依赖注入:Controllers举例:

1.简单注入:

AngularJs会扫描function的参数,提取参数的名称(name)作为function的依赖,

所以这种方式要求保证参数名称的正确性,但对参数的顺序并没有要求;

但是这种注入方式有一个问题,当我们将项目发布到正式环境时都会压缩我们的代码,这时function的参数可能会变成a,b,这就会导致我们的代码出现问题,下面两种注入方式可以帮我们解决这个问题。

2.数组注入

3.显示调用function的$inject

不仅值可以注入,包括工厂、服务、常量都是可以注入的。

简单示例:

时间: 2024-10-10 02:27:42

angularjs学习使用分享的相关文章

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc

51CTO学院三周年,我的linux学习思想分享

51CTO学院三周年了,我也关注学院三周年了,在51CTO的平台上,让我学到了很多的东西,也交到了很多朋友,每当你发一篇博文,总会有些志同道合的小伙伴们去点赞,甚至还会有大神高手,去指出你分享内容里面的不足.在和这些虚拟的未曾相识的朋友们的交流中我的技术得到了提高,时光荏苒,一晃都三年了. 首先我要感谢51CTO做的一个关于技术的分享平台,经过大家的分享,里面的博客已经非常丰富了,很多优秀的文章可以供我们去学习和分享.我是一名运维工程师,从事运维工作已经3年多了,每天上班的第一件事情就是登上我的

Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma

1.下载angularjs 进入其官网下载:https://angularjs.org/?,建议下载最新版的:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js 所有版本:https://code.angularjs.org/ 2.示例1 HelloWorld ! 新建一个helloworld.html <!doctype html> <html ng-app> <head> &

AngularJs学习总结-基本特性

现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+vordova,没有用bootstrap,主要做的是ios+安卓的app界面,ionic这个框架也不太了解,也需要花时间好好熟悉下.angularjs学习小白一枚,欢迎大神指正. AngularJs是什么? 简单来说,即javascript的一个框架,通过script标签添加到网页中.即我们使用an

AngularJS 学习

AngularJS 学习笔记(1) AngularJS是一款前端JS框架.AngularJS官网 http://angularjs.org [开发环境准备]: 1,下载AngularJS:JS and CSS in Solution 2,编辑器 WebStorm,下载地址:https://www.jetbrains.com/webstorm/  (配合最新版JetBrains使用,可以即时无刷新显示更新代码后的效果) 3,下载最新版Chrome,并安装扩展程序:JetBrains IDE Sup

【转】【Flex】FLEX 学习网站分享

[转:http://hi.baidu.com/tanghecaiyu/item/d662fbd7f5fbe02c38f6f764 ] FLEX 学习网站分享 http://blog.minidx.com/flex核心开发技术:http://blog.csdn.net/mervyn_lee/archive/2008/10/07/3027039.aspxfl部落:http://www.fltribe.com/捕鱼者说http://www.cnblogs.com/fishert/category/85

我的AngularJS 学习之旅

基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例 很早之前就听朋友说起AngularJs,但由于各种原因,一直没去研究.最近正好有同事也对这个框架比较感兴趣,大家一起讨论,于是终于“名正言顺”地开始研究了. 本文的目的是记录一下自己这两周的学习点滴,算是学习笔记吧,如果对初学的朋友有一点帮助,那也算是一件好事.嘿嘿 1.Angular的 起源 关于Angular 的起源,可以追溯到2009 年的

AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12

1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的代码差异:https://github.com/angular/angular-phonecat/compare/step-11...step-12 Dependencies(依赖的js库): bower.json { "name": "angular-seed", &

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<