Angular.js入门(1)

1.Angular优点

    1. 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令;
    2. 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能;
    3. 自定义Directive,比jQuery插件还灵活,但是需要深入了解Directive的一些特性。
    4. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助,我们的项目从上线到目前,UI变化很大,在摸索中迭代产品,但是js的代码基本上很少改动。

2.核心思想

依赖注入,模块化,双向绑定,语义化标签

3.适合的开发工具

sublime  webStorm

调试工具--->chrome

4.为了效果看起来更好,引入了bootstrap.min.css

(1)实现目标

在文本框内输入文本,点击提交之后,展示在任务列表中(以下是实现代码)

 1 <!doctype html>
 2 <html lang="en" ng-app="todoList">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>todoList</title>
 6     <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
 7 </head>
 8 <body ng-controller="TaskCtrl">
 9     <div class="input-group">
10         <input class="from-control" type="text" ng-model="task" />
11         <span class="input-group-btn">
12             <button class="btn btn-default" ng-click="add()">提交</button>
13         </span>
14     </div>
15     <h4 ng-hide="tasks.length==0">任务列表</h4><!--先生成标签-->
16     <!-- <h4 ng-if="tasks.length>0">任务列表</h4>需要时候才生成标签-->
17     <ul class="list-group">
18         <li class="list-group-item" ng-repeat="item in tasks">{{item}}
19             <a href="javascript:;" ng-click="tasks.splice($index,1)">删除</a>
20         </li>
21     </ul>
22     <script type="text/javascript" src="js/angular.js"></script>
23     <script type="text/javascript">
24        var app = angular.module(‘todoList‘,[]);
25           app.controller(‘TaskCtrl‘, function ($scope) {
26            $scope.task = ‘‘;
27            $scope.tasks = [];
28            $scope.add = function(){
29                $scope.tasks.push($scope.task);
30            };
31        });
32     </script>
33 </body>
34 </html>

Angular demo1

注意:

(1)<html lang="en" ng-app="todoList">         var app = angular.module(‘todoList‘,[]);

在标头添加ng-app="名字",和JS里边模块名字对应。

(2)ng-repeat="item in tasks"   重复,tasks 与JS中的数组名称对应。

(3)<body ng-controller="TaskCtrl"> 添加控制器,与JS中控制器名字对应。

(4)ng-model="task"  文本框输入的值,与JS中变量名字对应。

(5)ng-click="add()" 添加点击事件,在JS中添加点击事件的方法。

(6)ng-hide="tasks.length==0"  数组的长度为0的时候,标题提示不显示。

(7)ng-click="tasks.splice($index,1)" 点击删除时候,根据数组的角标来删除。

时间: 2024-10-29 05:07:42

Angular.js入门(1)的相关文章

angular.js 入门基础

1 angular.js 由google 开发,目前最新版本 2.0版: 2 angular.js 在原有HTML 语法基础上 允许扩展.   使用 {{}} 语法对数据进行动态绑定 3 搭建开发 angular.js 开发环境 在Angular 的官方网站  http://angularjs.org 中下载 最新版本的Angular 文件库 4开发简单的Angular应用 引用Angular 库 <script src="Scripts/angular-1.4.0-rc.2/angula

Angular.js入门教程

简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的.首先Html是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了. 通常,我们可以通过以下技术来解决决静态网页技术在构建动态应用上的不足: 1.类库 - 类库是一些函数的集合,它能帮助你写WEB应用.起主导作用的是你的代码,由你来决定何时使用类库.例如jQuery等 2.框架 - 框架是一种特殊的.已经实现了的WEB应用,你只需要对它填充具体的业务逻辑.这里框架是起主导作用的,由它来根据具体的应

Angular JS从入门基础 mvc三层架构 常用指令

Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 1.常用指令 AngularJS 通过指令扩展了HTML,且通过表达式绑定数据到 HTML.下面我们看一下AngularJS中的常用指令. (1).基本概念 指令:AngularJS中,通过扩展HTML的属性提供功能.所以,ng-

Angular JS + Express JS入门搭建网站

3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外配合Bootstrap提供的很多控件以及JQuery,后台主要是Express JS搭建的Web Server,Express JS配合Nginx使用非常方便. 由此在项目不忙的时候,自己于是有时间和兴趣学习一下Angular JS与Express JS. 同时自己实现了一个最简单的Angular

爱创课堂2016年Angular.JS前端开发从入门到上手企业开发视频教程(完整版)

资源网盘: 2016年Angular.JS从入门到上手企业开发 链接: https://pan.baidu.com/s/1dF2vBzV 密码: 3hbk 免费学习网站地址:http://www.icketang.com/ AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事.AngularJS试图成为WEB应用中的一种客户端的解决

angular.js简单入门。

小弟刚接触angular js  就写了一个简单的入门.后续慢慢补... 首先看 html 页面. <html> <meta charset="UTF-8"> <head> <title>angularJS</title> </head> <script type="text/javascript" src="./js/angular.min.js"></s

angular.js快速入门 hello world

我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服务. http://www.bootcdn.cn/ 我们找到 1.3.8的angular.js cdn地址,引用到页面 index.html中 http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js 初识 angular.js : 它是一个前端的

Angular.js的MVC

Angular.js中实现MVC的方式: 双向绑定: <!DOCTYPE html> <html lang="zh_CN" ng-app> <head> <meta charset="UTF-8"> <title>AngularJs入门</title> <link type="text/css" rel="stylesheet" href="

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js 概念摘录

转自:http://www.cnblogs.com/xishuai/p/mvc-mvp-mvvm-angularjs-knockoutjs-backbonejs-reactjs-emberjs-avalonjs.html MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Contro