AngularJs-HelloWorld

最新推荐文章于 2021-02-19 11:34:08 发布

MatrixSparse

最新推荐文章于 2021-02-19 11:34:08 发布

阅读量434

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS 文章标签： angularjs 框架

本文链接：https://blog.youkuaiyun.com/qq_25371579/article/details/51503895

AngularJS 专栏收录该内容

4 篇文章

订阅专栏

本文深入介绍了AngularJS的框架特性，包括其作为JavaScript框架的优势、与第一版的区别、移动设备的适应性增强，以及MVVM模式如何促进页面逻辑开发。通过展示一个简单的AngularJS应用实例，演示了如何利用AngularJS实现数据驱动的表现，以及路由、模块和控制器在单页应用开发中的应用。

AngularJs的简介和Hello World

AngularJs的简介

1、它是一个Js的框架
2、它现在有两个版本，第二个版本和第一个版本区别很大更侧重与适应移动端
3、它是一个MVVM框架，可以让你更专注于页面逻辑开发，用户数据驱动表现
4、它拥有路由、模块和控制器，更方便的开发单页应用SPA

Demo_v1.html

<!doctype html>
<html ng-app>
    <head>
        <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码),utf-8国际编码-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <!--当前页面的三要素-->
        <title>AngularJS HelloWorld!</title>
        <meta name="Keywords" content="关键词,关键词">
        <meta name="description" content="">
        <!--  -->
        <link rel="Shortcut Icon" href="images/favicon.ico" type="image/x-icon" />
        <link type="text/css" href="iconfont/iconfont.css" rel="stylesheet"/>
        <link type="text/css" href="../../../../素材/css/Matrix.css" rel="stylesheet"/>
        <!--css,js-->
        <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            font-size:12px;
            font-family:"微软雅黑";
            background:linear-gradient(90deg,#1d3746,#4D3648);
            height:2205px;
        }
        .wrapper{
            width:500px;
            height:500px;
            margin:100px auto;
        }
        #showButton{
            display: inline-block;
            padding:8px 69px;
            background:#C2A84A;
            color:#fff;
            font-size:12px;
            border-radius:5px;
        }
        #showButton:hover{
            background:#EDE176;
            color:#000;
            transition:all 0.3s linear;
        }
        #showButton2{
            display: inline-block;
            padding:8px 69px;
            background:#C2A84A;
            color:#fff;
            font-size:12px;
            border-radius:5px;
        }
        #showButton2:hover{
            background:#EDE176;
            color:#000;
            transition:all 0.3s linear;
        }
        input[type="text"]{
            background:#252525;
            outline:none;
            border-radius: 5px;
            border:1px solid #252525;
            padding:6px 18px;
        }
        ul li{
            margin:10px 0px;
        }
        </style>
    </head>
<body>

    <div class="wrapper">
        <h1>AnagularJs模式</h1>
        <ul>
          <li>姓：<input type="text"  ng-model="xing"/></li>
          <li>名：<input type="text"  ng-model="ming"/></li>
          <li><b>{{xing || ''}} {{ming || ' ' }}</b></li>
          <li><a href="#" id="showButton2">输出姓名</a></li>
        </ul>
        <h1>传统模式</h1>
        <ul>
          <li>姓：<input type="text" id="xingInput" /></li>
          <li>名：<input type="text" id="mingInput" /></li>
          <li><b id="nameView">Hello</b></li>
          <li><a href="#" id="showButton">输出姓名</a></li>
        </ul>
    </div>

    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/angular-1.0.1.min.js"></script>
    <script type="text/javascript">
         var xing = document.getElementById("xingInput");
         var ming = document.getElementById("mingInput");

         var showButton = document.getElementById("showButton");
         showButton.onclick = function(){
            var name = xing.value + " " + ming.value;
            var nameView = document.getElementById("nameView");
            nameView.innerHTML = name;
            // $("#nameView").text(name);
            return false;
         }
    </script>
</body>
</html>