augular.js 菜鸟学习笔记（一）

最新推荐文章于 2023-12-04 11:43:38 发布

gjc9620

最新推荐文章于 2023-12-04 11:43:38 发布

阅读量954

点赞数

本文链接：https://blog.csdn.net/gjc9620/article/details/42640603

版权

什么是augular？

--augular是一个前台的mvc框架

--可以建立单页面应用

--对html进行拓展

先上个例子

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
    <div ng-app="">
        <input ng-model="name" type="text"/>
        <p ng-bind="name"></p>
    </div>

</body>
</html>
<script src="lib/angular-1.2.5.min.js"></script>
<script>

</script>

使用ng-model 来建立model ng是ng的关键词

augular表达式

augular使用花括号{} 例子 {{10*10}}

augular和js表达式有相同点

    <div ng-app="" ng-init="tt=1;gg=4">{{ tt * gg }}</div>

//output 4

也可以使用ng-bind来实现一样的效果

        <div ng-app="" ng-init="tt=1;gg=4">
            <div ng-bind="tt * gg"></div>
        </div>

//output 4

字符串拼接的例子和js是一样的

        <div ng-app="" ng-init="tt='my name';gg='gjc9620'">
            <div ng-bind="tt+'  '+ gg"></div>
        </div>

//output my name gjc9620

使用 {{}}来拼接

        <div ng-app="" ng-init="tt='my name';gg='gjc9620'">
            <div>{{tt + '' +  gg}}</div>
        </div>

//output my name gjc9620

效果都是一样的

augular 对象

augular对象与js对象也略同

        <div ng-init=' child={name:"adas",age:12} '>
              <div ng-bind="child.name"></div>
        </div>

//output adas 同样的

        <div ng-init =' pp={name:"44",age:14}'>
            <div >{{pp.name}}</div>
        </div>

/output 44

augular 数组

数组也是如此

        <div ng-init=' child=[1,23,4] '>
              <div ng-bind="child[0]"></div>
        </div>

//output 1

        <div ng-init =' pp=[3,4,5,1]'>
            <div >{{pp[2]}}</div>
        </div>

//output 5

AngularJS 指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把应用程序数据绑定到 HTML 元素。

        <div  ng-app="" ng-init="tom={name:'alice',age18}">
            <input type="text" ng-model="tom.name"/>
            <div >{{tom.name}}</div>
        </div>

结果

	ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。

	一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

数据绑定

上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

在下一个实例中，两个文本域是通过两个 ng-model 指令同步的：

        <div ng-app="" ng-init="time=0;range=0">
            <input ng-model="time"/>
            <input ng-model="range"/>
            <div>{{range/time}}</div>
        </div>

输出

	使用ng-init并不是最好的声明方式

重复 HTML 元素

ng-repeat 指令会重复一个 HTML 元素：

        <div ng-init="person=['tom','jam','aaa']">
            <div ng-repeat=" x in person  ">
                  {{x}}
            </div>

        </div>

//output

tom

jam

aaa

ng-repeat 指令用在一个对象数组上：

        <div ng-init="person=[{name:'good',age:123},{name:'bad',age:456},{name:'tt',age:12}]">
            <div ng-repeat=" x in person  ">
                  {{x.name+"    "+x.age}}
            </div>

        </div>

//output

good 123

bad 456

tt 12

	AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。把实例中的对象想象成数据库中的记录。 --与backbone的逻辑基本一致属于数据库映射模型

小总结

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的 根元素。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-app 通过设置值（比如 ng-app="myModule"）连接到代码模块。

ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了 初始值。

通常情况下，不使用 ng-init。一般使用一个控制器或模块来代替。

ng-model 指令

ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid 无效的、dirty 污染的、touched 涉及的、error 错误的）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

感谢

w3c

gjc9620

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
augular.js 菜鸟学习笔记（一）

什么是augular？ --augular是一个前台的mvc框架 --可以建立单页面应用 --对html进行拓展先上个例子使用ng-model 来建立model ng是ng的关键词augular表达式
复制链接

扫一扫