• angularjs入门----笔记


    AngularJs也是一个MVVM的前端js框架。

    指令:ng-app/ng-init

    ng-app:1.启动angularjs框架;2.告诉angularjs框架从ng-app指令所在标签的开始到结束之间的所有DOM元素都由angularjs框架管理。

    注意:1.ng-app一般放在html标签内,用于告诉angularjs框架,整个页面都由angularjs管理;

    <html ng-app>
    <head>
        <title>Kong's Website</title>
        <script src="~/Scripts/angular.js"></script>
    </head>
    <body>
        <div>{{"hello world!"}}</div>
        <div>{{"hello angularjs!"}}</div>
    </body>
    </html>

    运行结果为:

    hello world!
    hello angularjs!

    2.一个页面默认加载第一个ng-app

    <html >
    <head>
        <title>Kong's Website</title>
        <script src="~/Scripts/angular.js"></script>
    </head>
    <body>
        <div ng-app>{{"hello world!"}}</div>
        <div ng-app>{{"hello angularjs!"}}</div>
    </body>
    </html>

    运行结果为

    hello world!
    {{"hello angularjs!"}}
     
    ng-init:初始化作用域
    <html ng-app>
    <head>
        <title>Kong's Website</title>
        <script src="~/Scripts/angular.js"></script>
    </head>
    <body ng-init="person={'name':'jane'};arr=['angularjs','jquery','dojo']">
        <div>{{person.name}}</div>
        <div>{{arr[0]}}</div>
    </body>
    </html>
    运行结果:
    jane
    angularjs
     
    ng-model:从作用域到视图,从视图到作用域的双向绑定
    <head>
        <title>Kong's Website</title>
        <script src="~/Scripts/angular.js"></script>
    </head>
    <body>
        <div>用户名:<input type="text" name="uname" ng-model="uname" /></div>
        <div><span id="info">{{uname}}</span></div>
    </body>
    </html>

    ng-bind:从作用域到视图的单向绑定

    <html ng-app>
    <head>
        <title>Kong's Website</title>
        <script src="~/Scripts/angular.js"></script>
    </head>
    <body>
        <div>用户名:<input type="text" name="uname" ng-model="uname" /></div>
        <div><span id="info" ng-bind="uname"></span></div>
    </body>
    </html>

    在绑定值,不需要进行运算处理以及使用过滤器对输出内容进行处理时,ng-bind可以代替{{}}

      
    表达式:{{}} 双大括号中间的部分,比如上述的person.name 和arr[0]
     
     
  • 相关阅读:
    zz 使用svn——项目的目录布局
    eclipse中字体太小
    SVN 项目的目录结构
    tuscany requires 学习
    搜索子集生成
    HZNUACM寒假集训Day12小结 数论入门
    HZNUACM寒假集训Day10小结 树树形DP
    模板 快速幂|取余
    HZNUACM寒假集训Day7小结 背包DP
    HZNUACM寒假集训Day6小结 线性DP
  • 原文地址:https://www.cnblogs.com/xiaoxinstart/p/12088673.html
Copyright © 2020-2023  润新知