• AngularJs-简介


    AngularJs:是一个javascript框架/库-----可以通过<script>标签引入到HTML 页面中

    eg:<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

    AngularJs:是HTML的扩展,通过ng-directives(指令)扩展了HTML------可以通过表达式绑定数据到页面中(HTML).

    AngularJs:可以开发单一页面应用程序.

    我们建议把脚本放在 <body> 元素的底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。

    各个angular.js版本下载:https://github.com/angular/angular.js/releases;

    AngularJs 指令:AngularJs指令是以ng作为前缀的HTML属性。

    ng-init:初始化AngularJs应用程序变量;

        <div ng-app = "angu" ng-init="firstName = 'hehe'" ng-controller="myCtro">
            <span>名字:{{firstName}}</span>
        </div>
        <script>
            var app = angular.module("angu",[]);
            app.controller("myCtro",function($scope){
    
            })
        </script>

    ng-app:定义了应用---告诉:ng-app所在的这个<div>元素就是AngularJs应用程序的“所有者”;

    <div ng-app = "angu" ng-init="firstName = 'hehe'" ng-controller="myCtro">
    //AngularJS 模块定义应用:
    <script>
      //AngularJS 模块
      var app = angular.module("angu",[]);
    </script>

    ng-controller:定义控制器---控制AngularJs应用;

    <div ng-app = "angu" ng-init="firstName = 'hehe'" ng-controller="myCtro">
    //AngularJS 控制器控制应用:
    <script>
      //AngularJS 模块
      var app = angular.module("angu",[]);
      //AngularJS 控制器
      app.controller("myCtro",function($scope){
      })
    </script>

    ng-model:把输入域的值绑定到应用程序的变量name(name这里只是举例).

    ng-bind:把应用程序的变量name绑定到某个段落的innerHTML.

        <div ng-app = "angu" ng-init="firstName = 'hehe'" ng-controller="myCtro">
            <span>名字:{{firstName}}</span>
            <input type="text" ng-model = "name">
            <span ng-bind = "name"></span>
        </div>
        <script>
            var app = angular.module("angu",[]);
            app.controller("myCtro",function($scope){
    
            })
        </script>

    AngularJs 表达式:AngularJs表达式写在双大括号内:{{expression}}

    AngularJs表达式---把应用程序中的数据绑定到HTML,与ng-bind有异曲同工之妙.

    但是,angularjs表达式会把数据输出到表达式书写的地方,而ng-bind指令则会把数据输出到所在标签的innerHTML中.

    AngularJs 表达式--可以包含文字、变量、运算符--eg:{{firstName +" --"+ lastName}}----与javascript中的表达式类似.

        <div ng-app = "angu" ng-controller="myCtro">
            <input type="text" ng-model = "firstName">
            <input type="text" ng-model = "lastName">
            <span ng-bind = "name"></span>
            <p>表达式:{{firstName + "5" + lastName}}</p>
        </div>
        <script>
            var app = angular.module("angu",[]);
            app.controller("myCtro",function($scope){
    
            })
        </script>

    AngularJs 应用:

    AngularJs 模块(Module)---定义了AngularJs应用;

    AngularJs 控制器 (Controller) ---用来控制AngularJs应用

    AngularJs 视图(view)中:ng-app指令定义了应用, ng-controller 定义了控制器。

  • 相关阅读:
    PyCharm配置 Git 教程
    Docker实践:基于python:3.7.1-stretch制作python镜像
    Docker开启远程安全访问
    Centos7安装apt-get
    Kubernetes 系列(二):在 Linux 部署多节点 Kubernetes 集群与 KubeSphere 容器平台
    微信小程序调试mock 数据,提示合法域名校验失败
    babel-plugin-import 配置多个组件按需加载时
    docker run -p 8070:80 -d nginx
    数据库的设计(E-R图,数据库模型图,三大范式)
    数据库 范式
  • 原文地址:https://www.cnblogs.com/old-street-hehe/p/angular-xj.html
Copyright © 2020-2023  润新知