Ag和Laravel开发仿知乎笔记-前端

最新推荐文章于 2024-08-28 07:38:36 发布

侠客岛的含笑

最新推荐文章于 2024-08-28 07:38:36 发布

阅读量951

点赞数

分类专栏： php 文章标签： angular jquery 函数前端

本文链接：https://blog.csdn.net/qq_33936481/article/details/72804031

版权

php 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

安装Angular
安装ui-router
安装normalize.css
安装JQuery
创建基础文件及基础页面

npm install jquery angular angular-ui-router normalize-css

API

Route::get('/', function () {
    return view('welcome');
});

view在resources中的views中

<!doctype html>
<html lang="zh" ng-app="bihu">
<head>
    <meta charset="UTF-8">
    <title>乐乎</title>
    <link rel="stylesheet" href="node_modules\normalize-css\normalize.css">
    <link rel="stylesheet" href="css\base.css">

</head>
<body>

<div ng-controller="TestController">
    [: name :]
</div>

<div>
    [: name :]
</div>







<script src="node_modules\jquery\dist\jquery.js"></script>
<script src="node_modules\angular\angular.js"></script>
<script src="node_modules\angular-ui-router\release\angular-ui-router.js"></script>
<script src="js\base.js"></script>
</body>

</html>

;(function(){
    'use strict';
    angular.module('bihu',[])
    //避免angular和larvael冲突{{}},配置，依赖
        .config(function($interpolateProvider){
            $interpolateProvider.startSymbol('[:');
            $interpolateProvider.endSymbol(':]');
        })
        .controller('TestController',function($scope){
            $scope.name = 'Bob';
        })
})();

Ag路由好处：网页内容布局刷新，流畅
ui-router路由的建立：

;(function(){
    'use strict';
    angular.module('bihu',['ui.router'])
    //避免angular和larvael冲突{{}},配置，依赖
        .config(function($interpolateProvider,$stateProvider,$urlRouterProvider){

            $interpolateProvider.startSymbol('[:');
            $interpolateProvider.endSymbol(':]');

            $urlRouterProvider.otherwise('/home');

            // 路由规则
            $stateProvider
                .state('home',{
                    url: '/home',
                    templateUrl:'home.tpl'

                })
                .state('login',{
                    url: '/login',
                    templateUrl:'login.tpl'

                })
        })

})();

<div class="navbar">
    <a href="" ui-sref="home">首页</a>
    <a href="" ui-sref="login">登陆</a>
</div>
<div>
    <div ui-view></div>
</div>
<script type="text/ng-template" id="home.tpl">
    <div>
        <h1>首页</h1>

    </div>
</script>

<script type="text/ng-template" id="login.tpl">
    <div>
        <h1>登陆</h1>

    </div>
</script>