AngularJs初接触

最新推荐文章于 2020-09-22 12:21:11 发布

技术之路上的苦心僧

最新推荐文章于 2020-09-22 12:21:11 发布

阅读量686

点赞数

分类专栏： AngularJs 前端知识

本文链接：https://blog.csdn.net/chengtt_love/article/details/50181153

版权

前端知识同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

AngularJs

2 篇文章 0 订阅

订阅专栏

虽然是java开发，但是总会接触到一些前端的知识，以前做Web只是和Jsp打交道，但是看到了Angularjs，感觉理念很好，感觉很有新鲜感。。。

被称为前端的MVC(Model-view-Controller)

感觉学习任何一个新的知识点，helloworld永远是不变的起点，今天我就用helloworld来开始我的AngularJs的学习之路。。。

以下是我按照案例写的一个HelloWorld的案例：

 
      <!DOCTYPE html> 
     
 
      < 
      html  
      ng-app 
      = 
      'helloApp' 
      > 
     
 
           
      < 
      head 
      > 
     
 
               
      < 
      meta  
      charset 
      = 
      "utf-8" 
      > 
     
 
               
      < 
      title 
      >AngularHello</ 
      title 
      > 
     
 
               
      < 
      script  
      type 
      = 
      "text/javascript"  
      src 
      = 
      "../js/angular/angular.js" 
      ></ 
      script 
      > 
     
 
               
      < 
      script  
      type 
      = 
      "text/javascript"  
      src 
      = 
      "../js/angularDemo/controller.js" 
      ></ 
      script 
      > 
     
 
           
      </ 
      head 
      > 
     
 
           
      < 
      body 
      > 
     
 
                   
      < 
      div  
      ng-controller 
      = 
      'Hello' 
      > 
     
 
                       
      < 
      input  
      ng-model 
      = 
      "greeting.text"  
      /> 
     
 
                       
      < 
      p 
      >< 
      span  
      ng-bind 
      = 
      "greeting.text" 
      ></ 
      span 
      >< 
      span 
      >,world</ 
      span 
      ></ 
      p 
      > 
     
 
                   
      </ 
      div 
      > 
     
 
           
      </ 
      body 
      > 
     
 
      </ 
      html 
      > 
     

controller.js如下

1

2

3

4

5

 
      var  
      helloApp = angular.module( 
      "helloApp" 
      ,[]); 
     
      helloApp.controller( 
      "Hello" 
      ,  
      function 
      ($scope) { 
     
      $scope.greeting = {text: 
      'hello' 
      }; 
     
      });