Just wondering did AngularJS change the way they do menu items? reason I ask is their documentation says to use md-nav-click="goto('#report')" but when I do it does not run the script. see below for full script.
<md-nav-bar>
<md-nav-item>Home</md-nav-item>
<md-nav-item md-nav-click="goto('#report')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
</md-nav-bar>
Full script
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="IPETLOST" ng-cloak>
<!--
Your HTML content here
-->
<div layout="column" layout-fill>
<md-toolbar>
<div class="md-toolbar-tools" ng-controller="demoController">
<span ng-bind="data.sitename"></span>
<!-- fill up the space between left and right area -->
<span flex></span>
<md-nav-bar>
<md-nav-item>Home</md-nav-item>
<md-nav-item md-nav-click="goto('#report')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
</md-nav-bar>
</div>
</md-toolbar>
<md-content>
Hello!
<div data-ui-view=""></div>
<div data-ui-view="header"></div>
<div data-ui-view="left"></div>
<div data-ui-view="container"></div>
<div data-ui-view="footer"></div>
</md-content>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.5/angular-ui-router.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
var ipetApp = angular.module('IPETLOST', ['ngMaterial', 'ngMessages', 'ui.router']);
ipetApp.config(function ($locationProvider, $urlRouterProvider, $stateProvider) {
$urlRouterProvider.deferIntercept();
$urlRouterProvider.otherwise('/404');
$locationProvider.html5Mode({enabled: false});
$stateProviderRef = $stateProvider;
});
ipetApp.controller('demoController', function ($scope) {
$scope.data = {
sitename: "IPET Lost Pet's"
}});
ipetApp.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])
ipetApp.run(['$q', '$rootScope','$http', '$urlRouter',
function ($q, $rootScope, $http, $urlRouter)
{
$http
.get("json.json")
.success(function(data)
{
angular.forEach(data, function (value, key)
{
var state = {
"url": value.url,
"parent" : value.parent,
"abstract": value.abstract,
"views": {}
};
angular.forEach(value.views, function (view)
{
state.views[view.name] = {
templateUrl : view.templateUrl,
};
});
$stateProviderRef.state(value.name, state);
});
// Configures $urlRouter's listener *after* your custom listener
$urlRouter.sync();
$urlRouter.listen();
});
}]);
</script>
</body>
</html>
http://codepen.io/russellharrower/pen/YWZmre
md-nav-bar and md-nav-item failed for me with 1.1.0-rc2 version of angular-material.min.css and angular-material.min.js when working with angular js version 1.5.5,
try 1.1.0-rc.5 version of angular-material.min.css and angular-material.min.js
update package.json from "angular-material": "git+https://github.com/angular/bower-material.git#master" to "angular-material": "^1.1.0-rc.5" as needed
Related
I want to have particular variable for menu to know which class to be active. Up to now I know how to set variable inside ng-view but I want to keep my menu out of that view. If I set variable in function in controller isn't visible outside of ng-view and that is exactly what I want to, to be visible. I try with rootscoope but I couldn't manage. If someone can help me my code is like this:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="example">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<title>Example</title>
</head>
<body>
<div class="container-fluid main-header">
<div class="main-menu-active">First page</div>
<div class="main-menu">Second page</div>
</div>
<div ng-view class="main-body"></div>
<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<link href="libs/ng-dialog/css/ngDialog.min.css" rel="stylesheet">
<link href="libs/ng-dialog/css/ngDialog-theme-default.css" rel="stylesheet">
<script src="libs/ng-dialog/js/ngDialog.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/mainCtr.js"></script>
</body>
</html>
app.js
(function () {
'use strict';
angular
.module('example', ['ngRoute','ngDialog'])
.config(function ($routeProvider,$httpProvider) {
$routeProvider.when('/', {
controller: 'mainCtr',
controllerAs: 'mCtr',
templateUrl: 'app/views/firstPage.html'
});
$routeProvider.when('/second', {
controller: 'mainCtr',
controllerAs: 'mCtr',
templateUrl: 'app/views/secondPage.html'
});
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
}).run(function($http, $httpParamSerializerJQLike) {
//decode json on every submit form
$http.defaults.transformRequest.unshift($httpParamSerializerJQLike);
})
})();
controller:
(function() {
'use strict';
angular
.module('example')
.controller('mainCtr', mainCtr);
mainCtr.$inject = ['$window','$routeParams','ngDialog','$timeout'];
function mainCtr($window,$routeParams,ngDialog,$timeout) {
var vm = this;
vm.firstPage = firstPage;
vm.secondPage = secondPage;
function firstPage() {
vm.test = 'This is first page';
}
function secondPage() {
vm.test = 'This is second page';
}
}
})();
I want to have access to variable vm.test in <div class="container-fluid main-header">
I would make a Controller around the ng-view which hold the value(s):
<body ng-controller="OuterController">
<div class="container-fluid main-header">
<div class="main-menu-active">First page</div>
<div class="main-menu">Second page</div>
</div>
<div ng-view class="main-body"></div>
...
</body>
and if you want to share data between the controllers in ng-view directive use a service.
So I've made a plunker to illustrate, how data sharing is accomplished: https://plnkr.co/edit/axekEgrFwnm93aFXoMKd
So the basic idea is to use a service and in someway either by button click as in the question or automatically in contoller as plunker, set the shared value.
Service
app.service('commonInfomation', function() {
return {
test: ''
};
});
Inner controller
app.controller('FirstCtrl', function($scope, commonInfomation) {
commonInfomation.test = "Hello from first page";
});
Outer controller
app.controller('MainCtrl', function($scope, commonInfomation) {
$scope.commonInfomation = commonInfomation;
});
View
<body ng-controller="MainCtrl">
<h2>{{commonInfomation.test}}</h2>
<div class="container-fluid main-header">
<a href="#/">
<div class="main-menu-active">First page</div>
</a>
<a href="#/second">
<div class="main-menu">Second page</div>
</a>
</div>
<div ng-view class="main-body"></div>
</body>
Module
var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'firstpage.html',
controller: 'FirstCtrl'
})
.when('/second', {
templateUrl: 'secondpage.html',
controller: 'SecondCtrl'
})
});
I just want to pass a parameter to the next page (edit page) by clicking edit button. I tried the following code but it's not working. The URL just shown like below quote but the page shows blank and the controller is not loaded also. What is wrong here?
http://localhost:8080/#/group/edit?id=586351373b6bba91152ab744
View
<md-button class="md-raised md-primary" ng-click="doEdit(item._id)" title="Edit">Edit</md-button>
Route
$routeProvider.when('/group/edit', {
templateUrl: 'template/group_edit.html',
controller: 'GroupEditCtrl'
})
Controller
$scope.doEdit = function (id) {
$location.path('/group/edit').search({id: id});
}
Maybe some more code could be useful to understand what's going wrong, this simple snippet seems to do the job.
angular.module('BlankApp', ['ngMaterial', 'ngRoute']);
angular
.module('BlankApp')
.config(['$routeProvider', setupRoutes])
.controller('ListController', ['$scope', '$location', ListController])
.controller('GroupEditCtrl', ['$scope', '$location',GroupEditCtrl]);
function setupRoutes($routeProvider) {
$routeProvider.
when("/", { controller: "ListController", templateUrl: "list.html" });
$routeProvider.when('/group/edit', {
templateUrl: 'edit.html',
controller: 'GroupEditCtrl'
})
}
function ListController($scope, $location) {
$scope.item = {_id: 123}
$scope.doEdit = function (id) {
$location.path('/group/edit').search({id: id});
}
}
function GroupEditCtrl($scope, $location) {
$scope.locationParam = $location.search().id
$scope.goBack = function() {
$location.path('/');
}
}
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<ng-view></ng-view>
<script type="text/ng-template" id="list.html">
<md-button class="md-raised md-primary" ng-click="doEdit(item._id)" title="Edit">Edit</md-button>
</script>
<script type="text/ng-template" id="edit.html">
ehy edit! id: <pre>{{locationParam | json}}</pre> <br/>
<md-button class="md-raised md-primary" ng-click="goBack()" title="Back">Back</md-button>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
</html>
I am having a problem with injecting the uibModal dependency in my app.js:
Angular Version: 1.5.7
ui.boostrap Version: 1.3.3
Bootstrap Version: 3.3.6
I keep getting this error:
angular.js:13708 Error: [$injector:unpr] Unknown provider: $uibModal Provider <- $uibModal <- ModalController
App.js:
var app = angular.module('App', ['ui.bootstrap', 'ui.bootstrap.tpls']);
app.controller('ModalController', ['$scope', '$uibModal ', function($scope, $uibModal) {
$scope.showModal = function() {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: '../HTML/templates/login-modal.html',
controller: 'newModalController',
show: true
});
};
}]);
app.controller('newModalController', function($scope, $uibModalInstance) {
$scope.close = function() {
$uibModalInstance.dismiss('close');
};
});
Index.html:
<html lang="en">
<head>
<title>App</title>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src="../resources/js/app.js"></script>
</head>
<body ng-app="App">
<header>
<nav>
<div class="row" ng-controller="ModalController">
<img src="../resources/img/logos.png" alt="logo" class="logo">
<ul class="nav-list">
<li>Learn More</li>
<li>Take Action</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
You also need ui-bootstrap-tpls for modal.
To anyone who needs help with this using the versions:
Angular Version: 1.5.7
Angular Animate: 1.5.7
ui.boostrap-tpls Version: 1.3.3
Bootstrap Version: 3.3.6
In your main index.html include the scripts. You only need angular, angular-animate, ui.boot-tpls, and bootstrap:
<html lang="en">
<head>
<title>App</title>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="../vendors/js/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
<script src="../vendors/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
<script src="../resources/js/app.js"></script>
</head>
<body>
...
</body>
</html>
first of all you have two controllers doing the same thing .when you can simply have one but in this case it's not the problem just a bad design.
try rewriting your first controller so instead of this
app.controller('ModalController', ['$scope', '$uibModal ', function($scope, $uibModal) {
do this :
app.controller('ModalController', function ($scope, $uibModal) {
dont forget to remove the ']' at the end of the controller
hope this helps !
I'm trying to implement a modal from angular ui bootstrap. After I implemented it on my web application, I got an unexpected behavior which is the modal does show up after I clicked the text, but what shows up is not the path that I wanted but rather the navbar of the web app.
Here's the code
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<base href='/'>
<!-- load bootstrap from CDN and custom CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body>
<header>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<span class="glyphicon glyphicon-book"></span>Testing App
</div>
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
<li>Write</li>
</ul>
</div>
</div>
</header>
<div ng-view></div>
</body>
</html>
app.js
angular.module('MyApp', ['ngRoute', 'ui.bootstrap'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
});
$locationProvider.html5Mode(true);
});
controller.js
angular.module('MyApp')
.controller('HomeController', function($scope, $location) {
$scope.data = "Hello Angular";
})
.controller('ModalController', function($scope, $location, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: function() {
},
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
home.html
<div class="container">
<h1>Awesome {{ data }}</h1>
</div>
modal.html (The path that the modal suppose to show);
<h1>Need to show this actually</h1>
The picture, what shows up after i clicked the text that trigger the modal event
Added this:
<script type="text/ng-template" id="modal.html">
<h1>Need to show this actually</h1>
</script>
right after
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
and it works in plunker:
http://plnkr.co/edit/bPuemujbTiX7U8AnY607?p=preview
I have a SPA that requires a different header to display based on which route location the user is on. It seems like the code I have should be working but it produces an error like this: TypeError: undefined is not a function
What am I missing here:
html
<html lang="en" ng-app="configApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<title>Configuration Admin</title>
<!-- Bootstrap CSS -->
<link href="_/css/bootstrap.css" rel="stylesheet">
<link href="_/css/main-styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Header-->
<div class="row">
<!-- Header to be shown when a program is edited-->
<div ng-include="'templates/headers/nav-icons.html'" ng-if="showNavIcons"></div>
<!-- Header to be shown when Dashboard view-->
<div ng-include="'templates/headers/nav-logo.html'" ng-if="hideNavIcons"></div>
</div> <!-- end header -->
</div>
<!-- Scripts -->
<script src="_/js/bootstrap.js"></script>
<script src="_/js/main-scripts.js"></script>
<script src="_/js/angular.min.js"></script>
<script src="_/js/angular-route.min.js"></script>
<script src="_/js/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="_/js/router.js"></script>
</body>
</html>
JS
var configApp = angular.module("configApp", ['ngRoute','ui.bootstrap'])
.config(function($routeProvider){
$routeProvider.when('/dashboard', {
templateUrl: 'templates/dashboard/home.html'
// controller: 'HomeController'
})
.when('/organizations', {
templateUrl: 'templates/dashboard/organizations/organizations-title.html',
controller: 'OrganizationController',
activetab: 'organizations'
})
.when('/program-details-edit', {
templateUrl: 'templates/dashboard/organizations/programs/program-details-edit.html',
controller: 'ProgramDetailsEdit'
})
.otherwise( {redirectTo: '/dashboard'} );
});
// Side Nav Link Controllers
configApp.controller('OrganizationController', function($scope) {});
configApp.controller('SideNavCtrl', function($scope, $location) {
$scope.isActive = function(route) {
return route === $location.path();
}
});
configApp.controller('ProgramDetailsEdit', ['$scope', '$location', '$route', function($scope, $route, $location) {
$scope.showNavIcons = $location.path() === '/program-details-edit';
}]);
configApp.controller('OrganizationController', ['$scope', '$location', '$route', function($scope, $route, $location) {
$scope.hideNavIcons = $location.path() === '/organizations';
$scope.$route = $route;
}]);
You need to add the controllers to the elements. "ng-controller='controllerName'" as an attribute. As far as the type error it is undefined however if you do... !!variable then undefined becomes false.
Edit:
<div class="row" ng-controller="ProgramDetailsEdit">
<!-- Header to be shown when a program is edited-->
<div ng-include="'templates/headers/nav-icons.html'" ng-if="!!showNavIcons">
</div>
ng-controller will give the dom inside of the dive access to everything that it puts into the $scope variable that you set in it.
As a side note you should look at UI-Router https://github.com/angular-ui/ui-router
it's a lot easier and more powerful then $routeProvider and you would be able to instead do something along the lines of the follow...
<div class="row" ng-controller="appController">
<!-- Header to be shown when a program is edited-->
<div ng-include="'templates/headers/nav-icons.html'" ng-if="state.name == 'programEditor'">
</div>
It might be the missing ng-controller tag on your html chrome.
Something like below :
Problem easily solved by using the angularJS ui router instead of ngRouter. Thanks for all the guidance on directing me to the perfect solution.
Heres how I solved it:
Javascript
var configApp = angular.module("configApp", ['ngRoute','ui.bootstrap','ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
// default route
$urlRouterProvider.otherwise("/dashboard");
// ui router states
$stateProvider
.state('cas', {
url: "/cas",
views: {
header: {
templateUrl: 'templates/headers/nav-logo.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/organizations-title.html',
controller: function($scope) {}
}
}
})
.state('applications', {
url: "/applications",
views: {
header: {
templateUrl: 'templates/headers/nav-logo.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/application/applications-title.html',
controller: function($scope) {}
}
}
})
.state('organizations', {
url: "/organizations",
views: {
header: {
templateUrl: 'templates/headers/nav-logo.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/organizations-title.html',
controller: function($scope) {}
}
}
})
.state('program-details', {
url: "/program-details",
views: {
header: {
templateUrl: 'templates/headers/nav-icons.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/programs/program-details.html',
controller: function($scope) {}
}
}
})
.state('program-details-edit', {
url: "/program-details-edit",
views: {
header: {
templateUrl: 'templates/headers/nav-icons.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/programs/program-details-edit.html',
controller: function($scope) {}
}
}
});
});
HTML
<html lang="en" ng-app="configApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<title>Configuration Admin</title>
<!-- Bootstrap CSS -->
<link href="_/css/bootstrap.css" rel="stylesheet">
<link href="_/css/main-styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Header-->
<div class="row" ng-controller="NavCtrl">
<div ui-view="header"></div>
</div> <!-- end header -->
<section class="main-content">
<div class="row">
<!-- Sidebar -->
<div class="col-xs-3 sidebar">
<!-- Pullout menu -->
<nav id="sidebar-pullout">
<!--<li>application</li>-->
<!--<li>organization</li>-->
<div id="menu-listings"></div>
</nav>
<!-- end pullout-->
<div ng-controller="SideNavCtrl">
<ul class="list-unstyled side-nav">
<li ng-class="{active:isActive('/cas')}"><a id="showCas" href="#/cas" ui-sref="cas">cas</a></li>
<li ng-class="{active:isActive('/applications')}">application</li>
<li ng-class="{active:isActive('/organizations')}">organization</li>
</ul>
</div>
</div> <!-- Side Bar end -->
<!-- Page Content -->
<div class="col-xs-9 main-page">
<div ui-view="content"></div>
</div> <!-- Page content end -->
</div>
</section> <!-- End main Content -->
</div>
<!-- Scripts -->
<script src="_/js/bootstrap.js"></script>
<script src="_/js/main-scripts.js"></script>
<script src="_/js/angular.min.js"></script>
<script src="_/js/angular-route.min.js"></script>
<script src="_/js/angular-ui-router.min.js"></script>
<script src="_/js/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="_/js/router.js"></script>
</body>
</html>