AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

-----------百度百科

下面做入门介绍，本篇主要以代码的形式解析。

1.在web页面引入angularJS的js文件。

可以通过官网下载，也可以在百度上搜索，建议从官网上下载。

http://www.angularjs.net.cn/这个中文网地址。上面也有相关教程。

2.代码分析

下面是copy来的例子：

<!DOCTYPE html>

<html lang="en" ng-app="todoApp">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="angular.min.js"></script>

    <script>

angular.module('todoApp', []) //定义模块

    .controller('TodoListController', function() { //定义控制器

        var todoList = this;

        todoList.todos = [ //定义一些初始化的属性

            { text: 'learn AngularJS', done: true },

            { text: 'build an AngularJS app', done: false }

        ];

        todoList.addTodo = function() { //定义方法

            todoList.todos.push({ text: todoList.todoText, done: false });

            todoList.todoText = '';

        };

        todoList.remaining = function() { //定义方法

            var count = 0;

            angular.forEach(todoList.todos, function(todo) { //遍历todos

                count += todo.done ? 0 : 1;

            });

            return count;

        };

        todoList.archive = function() { //定义方法

            var oldTodos = todoList.todos;

            todoList.todos = [];

            angular.forEach(oldTodos, function(todo) {

                if (!todo.done) todoList.todos.push(todo);

            });

        };

    });

</script>

</head>

<body>

    <div ng-controller="TodoListController as todoList">

        <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> [

        <a href="" ng-click="todoList.archive"></a>

        ]

        <ul>

            <li ng-repeat="todo in todoList.todos">

                <lable>

                    <input type="checkbox" ng-model="todo.done">

                    <span class="done-{{todo.done}}">{{todo.text}}</span>

                </lable>

            </li>

        </ul>

        <form ng-submit="todoList.addTodo()">

            <input type="text" ng-model="todoList.todoText" size="30" placeholder="请输入新的项目">

            <input type="submit" value="add">

        </form>

    </div>

    <div ng-app="myApp" ng-controller="myCtrl">

        名字: <input ng-model="name">

    </div>

    <script>

        var app = angular.module('myApp', []);

        app.controller('myCtrl', function($scope) {

            $scope.name = "John Doe";

        });

    </script>

</body>

</html>

　　

其中ng-app是指定一个angularJS应用。

对应js代码为：angular.module("todoApp",[]);定义一个module模块

ng-controller指定一个控制器，指明该标签下所有的子元素都归该控制器管理。

对应js代码为：     .controller('TodoListController', function() {});定义一个控制器

一个ng-app可以定义多个控制器。

本例是通过var todoList=this;让todoList代替了这个控制器。

通过定义todoList的属性和方法向外暴露这个控制器的可用属性和方法。

可以看见在html中是通过todoList属性的名字对其进行引用的。

其中{{}}代表数据绑定。

ng-model：表示把前台是数据绑定到控制器中，当然后台初始化有数据，也会显示在前台。

ng-submit：定义在form标签中，代码提交表单，也可以在button标签添加ng-click达到同样的效果。

ng-repeat：重复属性，会对需要遍历的元素生成对应个数的标签。

上述例子中就会生成对应todoList数目的span标签。

属性应用直接是todoList.todos。

方法的引用则为：todoList.addTodo()。
 
当然这只是其中一个暴露的方法。以后的篇章会介绍另外的。

AngularJS的简单使用(入门级)的更多相关文章

  1. AngularJs最简单解决跨域问题案例

    AngularJs最简单解决跨域问题案例 2016-05-20 09:18 82人阅读 评论(0) 收藏 举报  分类: javascript(1)  作者:白狼 出处:http://www.mank ...

  2. [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架

    MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...

  3. 对AngularJs的简单了解

    一.简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得 ...

  4. AngularJS的简单使用

    官网下载:AngularJS 路由视图需要:Angular-Route.js 基于zepto的轻量级的 JavaScript UI 库: App.js  用于开发跨平台的移动Web应用 <!DO ...

  5. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  6. angularjs的简单应用（一）

    AngularJS是为了克服html在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了. AngularJS使用了不同的方法,它尝试去 ...

  7. AngularJS作出简单聊天机器人

    简单聊天机器人 很初级的对话框形式.以前做对话框使用js,今天尝试使用AngularJS做出来 这里直接使用自己写的JSON数据. <!DOCTYPE html> <html lan ...

  8. AngularJS 实现简单购物车

    使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性. 先看看界面: 点击+-操作和删除: 这些全部只需要操作数据源就行,不需要关注界面. 实现过程: 一.使用 ...

  9. Angularjs实现简单分页

    一个后台中总需要一款分页,那我为了自己方便使用,实现如下效果 我把这个组件命名为tm.pagination,原因是因为起名真的太难起了.而且我网名也叫天名, TM就这样了吧.github地址https ...

随机推荐

  1. gen_server的enter_loop分析

    http://my.oschina.net/astute/blog/119250?p=1 在看ranch user guide的过程中,发现实现protocol handler需要使用特殊的gen_s ...

  2. layer弹框在实际项目中的一些应用

    官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,l ...

  3. Scheme语言--简单介绍

    一年前事实上有时间看完SICP这本书,后来由于种种原因,一直没有继续再学.由于SICP中使用Scheme确实应用不多.在Java,C++的语言眼里,Scheme确实非常另类.现在MIT已经放弃了使用S ...

  4. 美国是一个"愚蠢而落后的国度"--大家千万别去

    看到一篇文章,写的很诙谐风趣,已经被转载无数遍但却不知道原出处.读过之后又值得我们深思.和大家一起分享: 来美国已多时了.我后悔当初的选择.一直都被西方媒体所蒙蔽欺骗,让我错误地以为美国是一个现代化国 ...

  5. C# .NET数据库操作

    C# .NET更智能的数据库操作的封装完整版(重构)   前述: 第一次发表文章,不过是对数据库简单的封装,主要是阐述下思路.那么在上篇文章,在大家的指导下和提出意见,并自己对代码进行了思考.在这两天 ...

  6. JScript分割字符串

    作者:朱金灿 来源:http://blog.csdn.net/clever101 不废话了,直接用代码说明吧: try { var ss = new Array(); var str="12 ...

  7. HTML：描述语义

    一.HTML HTML:Hypertext Markup Launguage,超文本标记语言,是网页的就文件格式,用于描述网页语义. 二.HTML骨架 DTD手册:http://www.w3schoo ...

  8. WPF MeshGeometry3D

    说说 MeshGeometry3D 里 常用的 四个属性. 先看看 MSDN 的 简介 先说说 Positions,介绍说 是顶点位置的集合,什么意思,看张图片. 这张简单描述了一个三位坐标系,里面有 ...

  9. javascript相框echarts插件实现酷立方效果图的人

    最近由于项目需求,我们需要做的一类似网络效应的人立方效果,很多文件中的查询之后.百度发现echarts开源组件非常适合,而加载速度是伟大的.echarts图形主要使用html5这些新功能做,使用can ...

  10. java 压缩以及解压文件，有tar,zip，gz(gizp)和解压

    package com.yabsz.decompCompr; import java.io.File; import java.util.ArrayList; import java.util.Lis ...