angularjs的基础

ng-app属性申明所有被包含的内容都属于这个AngularJS应用,只有被具有ng-app属性的DOM元素包含的元素才会受AngularJs的影响。

  只需遇到$,你都可以只把它看作一个Angular对象。

数据模型对象是指$scope对象,$scope对象是一个简单的javascript对象,其中的属性可以被视图访问,也可以同控制器进行交流,双向数据绑定意味着视图改变了某个值,数据模型会通过脏检查,观察到这个变化,而如果数据模型改变了某个值,视图也会依赖变化重新渲染。

正如ng-app声明所有被它包含的元素都属于AngularJS应用一样。DOM元素上的ng-controller声明所有被它包含的元素都属于某一个控制器。

高效,能用在生产环境中的控制器代码,并把它封装在一个我们称之为模块的单元内。

在AngularJS中,模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块,每一个模块都包含了包含了定义具体功能代码。

优点:

·1、保存全局命名空间的情况;

 2、编写测试代码更容易,并能保持其清洁,以便更容易找到互相隔离的功能;

 3、易找到互相隔离的功能;

 4、易于在不同应用间应用代码;

 5、使应用能够以任意顺序加载顺序加载代码的各个部分;

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

angular.module(‘myApp‘,[]);(myApp为模块名称)

[]:字符块数组,本模块依赖于这些模块,依赖需要在本模块加载之前由注入器进行加载。

$scope对象是定义应用业务逻辑,控制器方法和视图属性的地方。

作用域是应用状态的基础,基于动态绑定,我们可以依赖视图在修改时,立刻更新$scope,也可以依赖$scope在其发生变化时,立刻重新渲染视图。

Angular启动并生成视图时,会将根据ng-app元素,同$rootscope进行绑定。$rootscope是所有$scope对象的最上层,最接近全局作用域的对象。

$scope对象就是一个普通的javascript对象,我们可以在其上修改或添加属性。

$scope对象在AngularJS中充当数据模型,但与传统的数据模型不一样,$scope并不负责处理和操作数据,它只是视图和HTML之间的桥梁,它是视图和控制器之间的胶水。

AngularJS应用的模版中使用多种标记,包括以下:

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

值绑定:模版语法{{}}可以将表达式绑定到视图上

过滤器:可以在视图中使用的函数,用来进行格式化

表单控件:用来检验用户输入的空间

在字符串模块中插值操作,需要在你的对象中注入$interpolate服务。

$interpolate服务是一个可以接受三个参数的函数,其中第一个参数是必需的。

  text(字符串):一个包含字符串插值标记的字符串

  mustHave Expression(布尔值):如果将这个参数设为true,当传人的字符串中含有表达式会返回null

  trusted Context(字符串):AngularJS会对已经进行过字符串插值操作的字符串通过$sec.getTrusted()方法进行严格的上下转义。

时间: 2024-12-24 18:31:19

angularjs的基础的相关文章

AngularJS入门基础——作用域

作用域$scope是构成AngularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它是非常重要的. $scope对像是定义应用业务逻辑,控制器方法和视图属性的地方.作用域是视图和控制器之间的胶水. 作用域是应用状态的基础,基于动态绑定.我们可以依赖视图在修改数据时立刻更新$scope,也可以依赖$scope在起发生变化时立刻重新渲染视图. 将应用的业务逻辑都放在控制器中,而将相关的数据都放在控制器的作用域中,这是非常完美的架构. $scope对象在AngularJS中充当数据模型,但与

AngularJS语法基础及数据绑定——详解各种数据绑定指令、属性应用

AngularJS简单易学,但是功能强大.特别是在构建单页面应用方面效果显著.而 数据绑定 可以说是他被广泛使用的最主要的优点.他舍弃了对DOM的操作方式,一切都由AngularJS来自动更新视图,我们不必写操作dom的代码.接下来我们就详细解释下AngularJS中数据绑定的方式,及其具体的使用规则.技巧. 首先介绍下此次博客的内容: 1.第一部分,介绍最最基本的AngularJS的根应用.控制器的基本语法,为初学者准备的. 2.第二部分,详解如何数据绑定,3种绑定方式的区别.分别用于什么情况

AngularJS入门基础PPT(附下载链接)

学习了Angularjs有段时间,自己写了一个PPT,个人认为总结的非常全面,对于入门基础够了. 大致模块有:Angularjs简单介绍,Angularjs特性,hello world,Controller,Directive,service,Filter,Route,form表单验证,Angularjs实现的一些功能组件,新手容易碰到的坑 PPT总共59张,相信看完你便对ng了解很多了~ 下载链接:点此下载 一下只节选了几张,先睹为快吧~

AngularJS入门基础系列—目录索引

AngularJS 特性 单页Web应用(SinglePage) 模板(template) Controller(控制器) Route(路由) Directive(指令) Filter(过滤器) AngularJS实现的一些小功能 演示AngularJS简单的双向绑定功能示例 菜单切换示例 TODOLIST的示例 冒泡排序算法视觉化 AngularJS介绍 我对AngularJS框架的理解

AngularJS入门基础——控制器

AngularJS中的控制器是一个函数,用来向视图的作用域添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. AngularJS同其他JavaScript框架最主要的一个区别就是,控制器并不适合用来执行DOM操作,格式化或数据操作,以及除存储数据模型之外的状态维护操作.它只是视图和$scope之间的桥梁. AngularJS应用的任何的一个部分,无论它渲染在哪个上下文,都有父级作用域存在.对ng-app所处的层级来讲,它的父级作用域就是$rootScope. 有一个例外,在指

AngularJS实用基础知识---入门必备

前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. 一.AngularJS指令与表达式 [AngularJS常用指令]1.ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个.2.ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中.eg:<input type="text"

AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定

一.DI-控制器参数 $scope - 在js和html之间传递数据 - 仅在控制器作用域内有效 $element - 是一个jQuery对象 - 作用域控制器所在的html元素 - 在js中,通过$element获取DOM对象 - var e = $element.children().eq(0); - $scope.w = e.width(); - $scope.h = e.height(); $http - http协议请求 - $http.get(url).success(functio

AngularJS之基础-5 路由(定义路由、使用路由)、自定义指令(Directive)

一.定义路由 ng-view - AngularJS 支持通过在单页面上的多个视图的单页应用 - ng-view 标记只是简单地创建一个占位符 - 使用 ng-template - 创建使用script标签的HTML视图 - 使用 - 定义类型作为主模块中 ng-template 的脚本块 $routeProvider - 映射相应的HTML页面或ng-template - 附加一个控制器使用相同键的服务   - 注意: - 需要angular-route.js脚本文件的引用 二.使用路由 锚点

AngularJS之基础-1 简介(基本概念、环境搭建)

一.基本概念 软件设计原则 - 不论是桌面应用还是Web应用,在进行设计编码时应该遵守一定的设计原则 软件设计模式 - 设计模式 Design Pattern,是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性.毫无疑问,设计模式用于已于他人于系统都是多赢的;设计模式使代码编制真正工程化;设计模式是软件工程的基石脉络,如同大厦的结构一样 - 23+1中设计模式 工厂模式.抽象工厂模式.建造者模式.原型模式.单例