AngularJs基础认识及应用

一、AngularJS简介

  AngularJS是一个JavaScript框架。它可通过<script>标签添加到HTML页面。

  AngularJS通过指令扩展了HTML,且通过表达式绑定数据到HTML

1.AngularJS通过ng-directives扩展了HTML

  Ng-app指令定义一个AngularJS应用程序。

  Ng-model指令把元素值(比如输入域的值)绑定到应用程序。

  Ng-bind指令把应用程序数据绑定到HTML视图。

2.什么是AngularJS

  AngularJS使得开发现代的单一页面应用程序变得更加容易。

  ·AngularJS把应用程序数据绑定到HTML元素。

  ·AngularJS可以克隆和重复HTML元素。

  ·AngularJS可以隐藏和显示HTML元素。

  ·AngularJS可以在HTML元素“背后”添加代码。

  ·AngularJS支持输入验证。

3.AngularJS指令

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

  Ng-init指令初始化AngularJS应用程序变量。

  * HTML5允许扩展的(自制的)属性,以data-开头。

   AngularJS属性以ng-开头,但是可以使用data-ng-来让网页对HTML5有效。

4.AngularJS表达式

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

  AngularJS表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之妙。

  AngularJS将在表达式书写的位置“输出”数据。

  AngularJS表达式很像Javascript表达式:它们可以包含文字、运算符和变量

二,angularJS的应用;

 1.AngularJS从架构层面可以大致分为四大模块和两小件;

四模块分别是:router(路由),directive(视图),controller(控制器),service(服务);

两小件分别是:$scope和$http;

而这四大块之间的互相作用便是angularJS框架的根本;

此图从数据流向的层面解释了各个模块之间的相互作用;

2.angularJS启动;

  1,自动启动;(ng-app="根组件名称")

     通过ng-app来标记angularJS所管理的边界;

     通过查看当前页面是否有ng-app指令来判断angular是否启动;

     一般ng-app标记在html上;

     创建根模块:

   <script>

    (function(){

     angular.module("demo",[]);

       .controller("oneCtr",function($scope){

           $scope.msg="hello angular"

      })

   }

   </script>

<html ng-app="demo">

<body ng-controller="oneCtr">

<span>{{msg}}<span>

</body>

</html>

2手动启动;

 <script>

    (function(){

     angular.module("demo",[]);

       .controller("oneCtr",function($scope){

           $scope.msg="hello angular"

      })

angular.bootstrap(document.querySelector(#app),["demo"]);

   }

   </script>

<html>

<body>

<span id="app">{{msg}}<span>

</body>

</html>

注:angular中页面上的所有的属性方法必须放在$scope上;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值