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

AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：
使用双大括号{{}}语法进行数据绑定；
支持表单和表单的验证；
能将逻辑代码关联到相关的DOM元素上；
能将HTML分组成可重用的组件。
 
AngularJS的出现就是为了解决页面上频繁的DOM操作。可以构建完整的CRUD（增加Create、查询Retrieve、更新Update、删除Delete）的应用。
构建一个CRUD应用可能用到的全部内容包括：数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。
 
AngularJS的架构思想：MVVM(model,view,viewmodel)
AngularJS中的数据绑定分为单向绑定和双向绑定，其中ng-model是双向绑定，这种绑定的方式会互相影响，模型的改变影响视图，视图的改变影响模型。
$scope方式实现的绑定是单向绑定。模型影响视图。
 
AngularJS的引入：
<script src="js/angular.min.js"></script>
 
简单常用的语法：
    ng-app="mainApp"  绑定在最外层根元素上（主模块），比如<html ng-app="...">
　　ng-controller:确定作用域
    ng-model="name"  把名字叫name的属性绑定到viewmodel中
　　ng-repeat:循环
    {{name}}  把view中的数据显示在视图上
    
    ng-model是双向绑定
    $scope是单向绑定

循环：
    ng-repeat

 
AngularJS在script中的应用：
    <script>
    加载主模块：
     var indexApp=angular.module("indexApp",[]);
    创建作用域：
      indexApp.controller("Index",function($scope,$http) { 
    定义变量：
        $scope.age=20
      }
    </script>
 
html中：
    确定作用域:
    <body ng-controller="Index">
    作用域内：
    <p>{{age}}</p>
    
    循环：
     <tr ng-repeat="stu in stuAll">
                <td>{{stu.s_id}}</td>
                <td>{{stu.s_name}}</td>
                <td>{{stu.s_age}}</td>
    </tr>
 
方法的定义和调用：
    $scope.init=function(){};
ng-blur="init()"//直接调用：$scope.init()
 
angularjs中提交数据的方式有两种,get,post
get请求：
    $http.get("/users/init?username=abc").success(function(){  })
 post请求：
    $http.post("/users/postdata",{username:abc}).success(function(){ })
 
内置的过滤器：
{{5000|currency}}  //将前面的数字过滤成钱的形式，默认为$,结果为：$5,000.00
{{5000|currency:"￥"}} //结果为：￥5,000.00
 
{{date|date:"yyyy-MM-dd HH:mm:SS"}}//过滤成日期并指定日期格式
 
{{abcArray|filter:6}}//查询数组中有6的项
 
{{name|orderBy: “...”}}//按照"..."排序
 
 
内置方法：
ng-class="{red:true}"//为元素绑定类名
ng-style：//设置样式（如：ng-style=“{background：'blue'}”）
ng-show="true/false"  ng-show="num>1"//设置元素是否显示,可以跟条件
ng-checked="true/false"//设置单选钮，复选框是否是选中状态
ng-selected="true/false"//设置下拉列表是否是选中状态
ng-click//点击事件
<img ng-src="{{url}}">//ng-src的作用是当网络原因导致图片还没有被加载出来时，不会出现带×的图片
 
 
angularjs中的模块化：
angularjs要实现单页面应用，需要用到模块化
模块化需要引进的js文件有：
<script src="js/angularjs_module/angular.min.js"></script>//主文件
<script src="js/angularjs_module/angular-route.min.js"></script>//配置路由的文件
<script src="js/module/reg/reg.js"></script>//模块的JS
 
模块化中，将路由配置在main.js中
main.js中的配置：
var mainApp=angular.module("mainApp",["ngRoute","regModule","loginModule","studentModule"]);//加载主模块及其他模块
mainApp.config(["$routeProvider",function($routeProvider){
　　$routeProvider.when("/reg",{templateUrl:"js/module/reg/reg.html",controller:"regController"})//配置路径及控制范围
　　$routeProvider.otherwise({
　　　　redirectTo:"/reg"
})//设置主页面中默认显示的模块
}//每个模块的路径配置

主页面中可替换的区域用：ng-view

$location.path("/login")//设置跳转到的模块
 
 

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作出简单聊天机器人

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

  7. AngularJS 实现简单购物车

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

  8. Angularjs实现简单分页

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

  9. AngularJS实现简单的分页功能

    本篇文章由:http://xinpure.com/angularjs-simple-paging-functionality/ 初学 AngularJS, 尝试着写一些小功能 代码逻辑写得略粗糙,仅仅 ...

随机推荐

  1. contiki-断点的保存和恢复

    保存断点 保存断点是通过保存行数来完成的,在被中断的地方插入编译器关键字_LINE_,编译器便自动记录所终端的行数.展开那些具有中断功能的宏,可以发现最后保存行数是宏LC_SET,取宏PROCESS_ ...

  2. Android之Toolbar的三个问题：修改左边箭头颜色、怎样修改右边以及子activity中的toolbar添加返回箭头

    1)怎样修改左边这个小箭头的颜色? 2)怎样修改右边这三个点的颜色.怎样把这三个点替换成我自己的图标? 3)怎样让"交易清单"这4个字居中显示? 首先设置Theme为AppComp ...

  3. java网络编程，简单的客户端和服务器端

    1.服务器端 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import ...

  4. Redis ConnectionException

    JAVA 远程链接Redis服务失败,错误信息如下: redis.clients.jedis.exceptions.JedisConnectionException: Could not get a ...

  5. 从github拉取项目到myeclipse本地

    1.首先拿到jacky-lulu分享的地址 https://github.com/jacky-lulu1/cxf_client 2.登录jacky-lulu账号,fork一份cxf_client到自己 ...

  6. Hexo+Github 高逼格个人博客搭建指南(准备篇)

    git 下载并安装git 进入git下载页面,下载合适的版本,并安装.一路 Next ,到了 Select Components 界面,勾选 Git Bash Here 和 Git GUI Here. ...

  7. [转]Python os.path模块

    os.path模块 原文链接:http://my.oschina.net/cuffica/blog/33494 basename('文件路径')    去掉目录路径,返回fname文件名 import ...

  8. .net网站发布后的没有权限及被上传asp漏洞等问题

    前一阶段网站移到阿里云上,发现在线支付出现了问题,也接收不到银行返回的支付信息. 检查了源代码,发现是和支付有关的加密文件位置不对了,以前是放在e盘,现在新的是放在d盘,位置的信息是写死在代码中的.找 ...

  9. svn设置外网访问

    1.设置路由器 默认协议为:https 端口号:443 服务器地址:https://主机名/svn/版本库 例:https://mleo-pc/svn/Share/ 也可就主机名用IP地址代替 如:h ...

  10. MacOS长按无效问题

    defaults write -g ApplePressAndHoldEnabled -bool FALSE 注销并重新登录系统使其更改生效. 如果需要恢复长按键盘可以重音字符或非英文字符的功能,请打 ...