• Live2D 看板娘


    第一步:引入angularjs 添加app模块

    现在我们正式进入开发,下面是我们在上一节建立的目录结构:

    我们需要再src路径下,新建index.html文件,先引入angularjs文件:

    <!DOCTYPE html>
    <html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8">
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>Job APP</title> </head> <body> <h1>Hello World !</h1> <script type="text/javascript" src="vendor/angular/angular.min.js"></script> </body> </html>

    现在,在我们的src路径下,会多一个index.html文件:

    之后,在src/script路径下,新建app.js文件,使用严格模式,并引入angular模块:

    'use strict';
    
    angular.module('app',[]);

    再次打开index.html文件,在<html>或<body>标签内,加入ng-app指令,这样才能让页面用app模块来启动:

    <html lang="en" ng-app="app">

    第二步:配置路由

    路由是管理页面的业务逻辑以及页面跳转的,要使用路由,我们需要先来安装路由模块,angular.js 1的路由时ui-router。打开终端,进入项目目录,使用bower进行安装,执行命令:

      $ bower install --save ui-router

    安装完成后,我们在终端执行gulp拷贝第三方依赖的命令:$ gulp lib,然后就能看到ui-router在项目中的目录地址:

    然后,我们在index.html文件的angularjs后面,引入ui-router文件:

    <body>
        <h1>Hello World !</h1>
        <script type="text/javascript" src="vendor/angular/angular.min.js"></script>
        <script type="text/javascript" src="vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>

    打开app.js文件,进入ui-router依赖:

    angular.module('app',['ui.router']);

    现在可以开始配置路由了,在src/script/目录下,新建config文件夹,用来放置配置项,在config文件夹里,新建router.js文件,配置路由:

    'use strict';
    angular.module('app').config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
        $stateProvider.state('main',{
            url:'/main',
            templateUrl:'view/main.html',
            controller:'mainCtrl'
        });
        $urlRouterProvider.otherwise('main');
    }]);

    然后声明引入页面的指令,打开index.html文件:

    <body>
        <!-- 声明引入页面指令ui-view -->
        <section ui-view></section>

    现在,我们在src/view/下的main.html文件里写入内容,预览应用即可看到对应内容啦~

    第三步:使用rem 让移动端自适应

    打开index.html,写入控制根字体大写的JS代码:

    <script>
        document.getElementsByTagName('html')[0].style.fontSize = window.screen.width / 10 + 'px';
    </script>
  • 相关阅读:
    Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)
    JavaScript:最烂与最火
    JSP九大内置对象和四种属性范围解读
    codevs1009
    hdu 4869 Turn the pokers (2014多校联合第一场 I)
    OpenGL——点的绘制(使用OpenGL来绘制可旋转坐标系的螺旋线)
    nodejs 批处理运行 app.js
    jquery更新后怎样在一个站点中使用两个版本号的jQuery
    vs连接mysql出错解决方法
    uva 10627
  • 原文地址:https://www.cnblogs.com/jiangtengteng/p/6801334.html
Copyright © 2020-2023  润新知