zoukankan      html  css  js  c++  java
  • angularjs的简单应用(一)

    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")//设置跳转到的模块
     
     
  • 相关阅读:
    浅谈欧拉定理的证明
    10-8 王小呆的校内互坑赛题解
    10-8 王小呆的校内互坑赛题面
    线段树 洛谷P3932 浮游大陆的68号岛
    BFS+最小生成树+倍增+LCA【bzoj】4242 水壶
    洛谷P1119 灾后重建
    border-radius:50%和100%的区别
    react-native Android release打包失败
    关于react理解的文章
    atom常用快捷键-mac亲测
  • 原文地址:https://www.cnblogs.com/hongxuejiao/p/4987028.html
Copyright © 2011-2022 走看看