I am calling a Bootstrap Model on hyperlink.
My code was in "MasterPageNavBar.html"
Login/SignUp
Here is my completed code "MasterPageNavBar.html"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/bootstrap-theme.css" rel="stylesheet" />
<script src="../Scripts/angular-ui-router.js"></script>
<script src="../Scripts/angular-ui-router.min.js"></script>
<script src="../Scripts/Collapse.JS"></script>
</head>
<body>
<div>
<div>
<h3>AngularJS Tutorial</h3>
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#mynavbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li class="active"><a data-ui-sref="home">Home</a></li>
<li><a data-ui-sref="contactus">Contact</a></li>
<li>Gallery</li>
<li>About</li>
</ul>
<ul class="nav navbar-right navbar-nav">
<li>
Login/SignUp
<!-- Modal HTML -->
<form>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body form-group">
<input style="margin-bottom:15px" type="text" class="form-control " placeholder="User Name ---" />
<input style="margin-bottom:5px" type="text" class="form-control " placeholder="Password" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Login</button>
<button type="button" class="btn btn-primary">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
When i run alone this page , Modal was working fine. Here is the output of a model.
up to here code is fine.
My Problem is here
I am calling this "MasterPageNavBar.html page in another page "index.html". Here is my "Index.html" code( this my start page).
**<div ng-include="'../Views/MasterPageNavBar.html'"></div>**
<div ng-include="'../Views/ContentPage.html'"></div>
Modal window is not working through running "Index.html" page.
One thing i have noticed that " when on click Login link 'UI-Route functionality is working' and it's is looking for a myModel page and its is not finding. Below is my ui.route module. ( I don't want to call this ui.rotuer on click Login link.
**Login/SignUp**
var myrouting=angular.module('routingDemoApp', ['ui.router'])
myrouting.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, send to /business
$urlRouterProvider.otherwise("", "/index")
$stateProvider
.state('index', {
url: "/index",
templateUrl: "../Views/home.html"
})
.state('contactus', {
url: "/contactus",
templateUrl: "../Views/contactus.html",
})
.state('home', {
url: "/home",
templateUrl: "../Views/home.html",
})
You can use ng-click to open your modal as given below:
Login/SignUp
In your controller write the following code:
$scope.openModal= function(){ $("#myModal").modal("show"); }
I hope it will help you
Your best bet is to use the data-target attribute that Bootstrap supports (http://getbootstrap.com/javascript/#via-data-attributes). Use it like data-target="#myModal" and remove the href="". Then Angular will not attempt to navigate to it.
Related
I have a requirement where I have two buttons:
A and B
A has 3 tabs associated with it- a,aa and aaa
B has 3 tabs associated with it- b,bb and bbb
The page should initially load with A active(css class will be different for the active button) and 'a' tab active.
When I click B button, B becomes the active button and it should hide all the tabs associated with A and show only tabs associated with B.
When I click A button, A becomes the active button and it should hide all the tabs associated with B and show only tabs associated with A.
Basically at any point of time, there should be only 3 tabs visible.
I have been trying to do this using ng-show directive of angularjs. I tried ng-hide also with no luck.
Here is the plunker.
The button events are getting hit every time and the ng-show scope variable is also getting updated. But the tabs just dont hide.
<!DOCTYPE html>
<html ng-app="aaabbb">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body id="main" ng-controller="mainController" >
<div class="container">
<div class="row">
<form>
<div class="form-group ">
<div class="container">
<div class="row text-center">
<div ng-controller="mainController">
<input type="button" value="a" ng-class="{'btn btn-primary': aselected}" ng-click="aSelect()" />
<input type="button" value="b" ng-class="{'btn btn-primary': bselected}" ng-click="bSelect()" />
</div>
</div>
</div>
</div>
</form>
</div>
<div ng-controller="mainController">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#a" data-toggle="tab" ng-show='a'>a</a></li>
<li><a href="#aa" data-toggle="tab" ng-show='a'>aa</a></li>
<li><a href="#aaa" data-toggle="tab" ng-show='a'>aaa</a></li>
<li><a href="#b" data-toggle="tab" ng-show='b'>b</a></li>
<li><a href="#bb" data-toggle="tab" ng-show='b'>bb</a></li>
<li><a href="#bbb" data-toggle="tab" ng-show='b'>bbb</a></li>
</ul>
</div>
<div id="atabcontent" class="tab-content" ng-controller="mainController" ng-show='a'>
<div class="tab-pane fade in active" id="a" ng-show='a'>
<p>a content</p>
</div>
<div class="tab-pane fade" id="aa" ng-show='a'>
<p>aa content</p>
</div>
<div class="tab-pane fade" id="aaa" ng-show='a'>
<p>aaa content</p>
</div>
</div>
<div id="btabcontent" class="tab-content" ng-controller="mainController" ng-show='b'>
<div class="tab-pane fade in active" id="b" ng-show='b'>
<p>b content</p>
</div>
<div class="tab-pane fade" id="bb" ng-show='b'>
<p>bb content</p>
</div>
<div class="tab-pane fade" id="bbb" ng-show='b'>
<p>bbb content</p>
</div>
</div>
</div>
function mainController($scope, $http) {
$scope.a=true;
$scope.b=false;
$scope.aSelect = function(){
$scope.aselected=true;
$scope.bselected=false;
$scope.a=true;
$scope.b=false;
}
$scope.bSelect = function(){
$scope.aselected=false;
$scope.bselected=true;
$scope.a=false;
$scope.b=true;
}
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
var target = $(e.target).attr("href");
if(target=='#a'){
//reload the content from the web service
}
else if (target == '#aa') {
//reload the content from the web service
} else if (target == '#aaa') {
//reload the content from the web service
} else if (target == '#b') {
//reload the content from the web service
} else if (target == "#bb") {
//reload the content from the web service
} else if (target == "#bbb") {
//reload the content from the web service
}
});
}
Working plunker: https://plnkr.co/edit/XSoHry?p=preview
You have a lot of miscellaneous issues. For one, there are several ng-controller directives when there should only be one:
<body id="main" ng-controller="mainController" >
...
<div ng-controller="mainController">
...
<div id="atabcontent" class="tab-content" ng-controller="mainController" ng-show='a'>
...
<div id="btabcontent" class="tab-content" ng-controller="mainController" ng-show='b'>
You are creating a new instance of the controller each time you do that which creates a new scope, which is guaranteed to cause you problems. You only need one instance of the controller.
There is no call to start the angular app. You need, at minimum, this:
angular.module('aaabbb', [])
.controller('mainController', mainController);
Run below html and angular js code.
Error in your code:
1. Change the link of 1st script tag as mentioned in below code.
2. Angular module = aaabbb is not defined. that is included in below code.
3. Attach the controller to angular module.
4. Their should be only one ng-controller in body tag.
// Code goes here
// module name aaabbb is attached to angular.
var app = angular.module("aaabbb",[]);
var mainController = function($scope, $http) {
$scope.a=true;
$scope.b=false;
$scope.aSelect = function(){
$scope.aselected=true;
$scope.bselected=false;
$scope.a=true;
$scope.b=false;
}
$scope.bSelect = function(){
$scope.aselected=false;
$scope.bselected=true;
$scope.a=false;
$scope.b=true;
}
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
var target = $(e.target).attr("href");
if(target=='#a'){
//reload the content from the web service
}
else if (target == '#aa') {
//reload the content from the web service
} else if (target == '#aaa') {
//reload the content from the web service
} else if (target == '#b') {
//reload the content from the web service
} else if (target == "#bb") {
//reload the content from the web service
} else if (target == "#bbb") {
//reload the content from the web service
}
});
};
// mainController is attached to angular module.
app.controller("mainController",mainController);
<!DOCTYPE html>
<html ng-app="aaabbb">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body id="main" ng-controller="mainController" >
<div class="container">
<div class="row">
<form>
<div class="form-group ">
<div class="container">
<div class="row text-center">
<div>
<input type="button" value="a" ng-class="{'btn btn-primary': aselected}" ng-click="aSelect()" />
<input type="button" value="b" ng-class="{'btn btn-primary': bselected}" ng-click="bSelect()" />
</div>
</div>
</div>
</div>
</form>
</div>
<div>
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#a" data-toggle="tab" ng-show='a'>a</a></li>
<li><a href="#aa" data-toggle="tab" ng-show='a'>aa</a></li>
<li><a href="#aaa" data-toggle="tab" ng-show='a'>aaa</a></li>
<li><a href="#b" data-toggle="tab" ng-show='b'>b</a></li>
<li><a href="#bb" data-toggle="tab" ng-show='b'>bb</a></li>
<li><a href="#bbb" data-toggle="tab" ng-show='b'>bbb</a></li>
</ul>
</div>
<div id="atabcontent" class="tab-content" ng-show='a'>
<div class="tab-pane fade in active" id="a" ng-show='a'>
<p>a content</p>
</div>
<div class="tab-pane fade" id="aa" ng-show='a'>
<p>aa content</p>
</div>
<div class="tab-pane fade" id="aaa" ng-show='a'>
<p>aaa content</p>
</div>
</div>
<div id="btabcontent" class="tab-content" ng-show='b'>
<div class="tab-pane fade in active" id="b" ng-show='b'>
<p>b content</p>
</div>
<div class="tab-pane fade" id="bb" ng-show='b'>
<p>bb content</p>
</div>
<div class="tab-pane fade" id="bbb" ng-show='b'>
<p>bbb content</p>
</div>
</div>
</div>
</body>
</html>
I have just started with learning AngularJS and everthing works great before I started to write some easy controller method and method doesn't work even i include ng-contoller I tried to include it as separated js file but that also doens't work I am new to angularJS so I would appreciate any help I also tried with notped++ to do the same but doesn't work this is my code;
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div class="container" data-ng-controller="AppController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contact Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="alert-success">Browse</li>
<li>Add contacts</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search"/>
</form>
</div>
</nav>
<div class="page-header">
<h2>Prvo poglavlje <small>Hello world</small></h2>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name||"World"}}</h1>
<input type="text" class="form-control input-lg" data-ng-model="name" />
</div>
<div class="row">
<div class="col-sm-8 pull-right hidden-lg" >
<div class="row">
<div class="col-sm-6">
<p>Prvi</p>
</div>
<div class="col-sm-6">
<p>Drugi</p>
</div>
</div>
</div>
<div class="col-sm-4 pull-left show" >
This is our sidebar
</div>
</div>
<div class="row">
<div class="col-md-8">
<button ng-click="clickHandler()">Click me</button>
</div>
</div>
</div>
</div>
<script>
function AppController($scope) {
$scope.clickHandler = function () {
window.alert("Clicked");
};
}
</script>
</body>
</html>
You have to define a module before instantiate your controller:
angular
.module('app', [])
.controller('AppController', AppController);
AppController.$inject = ['$scope'];
function AppController($scope) {
$scope.clickHandler = function () {
window.alert("Clicked");
};
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller="AppController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contact Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="alert-success">Browse</li>
<li>Add contacts</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search" />
</form>
</div>
</nav>
<div class="page-header">
<h2>Prvo poglavlje <small>Hello world</small></h2>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name||"World"}}</h1>
<input type="text" class="form-control input-lg" data-ng-model="name" />
</div>
<div class="row">
<div class="col-sm-8 pull-right hidden-lg">
<div class="row">
<div class="col-sm-6">
<p>Prvi</p>
</div>
<div class="col-sm-6">
<p>Drugi</p>
</div>
</div>
</div>
<div class="col-sm-4 pull-left show">
This is our sidebar
</div>
</div>
<div class="row">
<div class="col-md-8">
<button ng-click="clickHandler()">Click me</button>
</div>
</div>
</div>
</div>
</body>
</html>
You have not defined the module anywhere in the code,
In View:
<html ng-app="myApp">
In JS:
var app = angular.module("myApp", []);
Working Sample
You need to include the angular module. Angular works with modules.
Controllers are part of module.
Try something like this:
app = angular.module("myApp", []);
app. Controller(...);
And use this module in your html like
<html ng-app="myApp">
Also,
The controller declaration you are using is old.
Try this:
app.controller('controllerName', ['$scope', function($scope){...}]);
I have this website routing my pages with 4 html files and it works fine, but when I am trying to add or remove a new one, it just shows blank screen with my navigation bar only.
The error I caught is :
Error: $injector:modulerr
Module Error
Being a noobie in Angular I saw various solutions that have to do with the ngRoute, but in vain.
I want to add more html files for the rest of the projects but I can't.
I use 1.2.15 version and call the files locally. Below is the Angular script I am using, there's also some code added to browse through the projects.
var app = angular.module('myapp', ['ngRoute','ngAnimate']);
app.controller('MainCtrl', function($scope, NextBackBasicService, $location) {
$scope.message = $location.path();
});
app.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
controller: 'MainCtrl'
}).
when('/example1', {
templateUrl: 'example.html',
controller: 'MainCtrl'
}).
when('/example2', {
templateUrl: 'example2.html',
controller: 'MainCtrl'
}).
when('/example3', {
templateUrl: 'example3.html',
controller: 'MainCtrl'
}).
when('/example4', {
templateUrl: 'example4.html',
controller: 'MainCtrl'
});
$routeProvider.otherwise({
redirectTo: '/route'
});
});
app.run(function($rootScope, NextBackBasicService){
$rootScope.goNext = function() {
NextBackBasicService.goNext();
};
$rootScope.goBack = function() {
NextBackBasicService.goBack();
};
});
app.factory('NextBackBasicService', function($route, $location) {
//array for keeping defined routes
var routes = [];
angular.forEach($route.routes, function(config, route) {
//not to add same route twice
if (angular.isUndefined(config.redirectTo)) {
routes.push(route);
}
});
return {
goNext: function() {
var nextIndex = routes.indexOf($location.path()) + 1;
if (nextIndex === routes.length) {
$location.path(routes[0]);
} else {
$location.path(routes[nextIndex]);
}
},
goBack: function() {
//window.history.back();
var backIndex = routes.indexOf($location.path()) - 1;
if (backIndex === -1) {
$location.path(routes[routes.length - 1]);
} else {
$location.path(routes[backIndex]);
}
}
};
});
And here is my index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>My Title</title>
<!--<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>-->
<!--<script data-require="ng-route#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0-rc.3/angular-route.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700&subset=latin,greek,greek-ext' rel='stylesheet' type='text/css'>
<!--Loads Angular
<script src="https://code.angularjs.org/1.2.15/angular.min.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular-route.min.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular-animate.min.js"></script>-->
<script src="js/angular.min.js" data-semver="1.2.15"></script>
<script src="js/angular-route.min.js" data-semver="1.2.15"></script>
<script src="js/angular-animate.min.js"></script>
<script src="app.js"></script>
<!--jQuery-->
<script src="js/jquery.js" type="text/javascript">
<!--Bootstrap-->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script>
$( document ).ready(function() {
$(".burger").click(function(){
$(this).toggleClass("active");
});
});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container mynavigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>-->
<button type="button" class="burger navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span>
</button>
<a class="pull-left" href="#">
<img class="logodimensions" src="images/svg/logo.svg" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="animlinks" href="#">WORK</a>
</li>
<li>
<a class="animlinks" href="#">CONTACT / ABOUT</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="grids">
<div ng-controller="MainCtrl">
<ng-view></ng-view>
</div>
</div>
</body>
</html>
And bellow is the home where the routing takes place between the projects.
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example1">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example2">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example3">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example4">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
</div>
</div>
According to the posted error, the last reference to $routeProvider is undefined. There seems to be something odd going on, because that shouldn't be possible. To side-step this issue though, you can remove the last reference to $routeProvider and just chain the .otherwise() call onto the previous .when() call, like so:
.when('/example4', { templateUrl: 'example4.html', controller: 'MainCtrl' }).otherwise({ redirectTo: '/route' });
I am trying to learn angular with a book and some examples, and I have some difficult times trying to understand how the ng-view knows the view to display based on the routing system.
So here is an example:
<!DOCTYPE html>
<html ng-app="maintenance">
<head>
<title>Dive Sites</title>
<link href="./lib/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="./site.css" rel="stylesheet" />
</head>
<body ng-controller="adminCtrl">
<!-- Navigation header -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#adminMenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Younderwater Admin
</a>
<div class="collapse navbar-collapse" id="adminMenu">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('Locations')}">
Locations
</li>
<li ng-class="{active: isActive('Sites')}">
<a href="#/sites">
Dive Sites
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional title bar -->
<div class="current-spot">
<div class="container-fluid" >
<div class="container">
<div ng-show="view=='locations'">
<h3>Manage the list of diving locations</h3>
</div>
<div ng-show="view=='diveSites'">
<h3>Manage the list of dive sites</h3>
</div>
</div>
</div>
</div>
<!-- View content -->
<div class="main-content">
<div class="container-fluid">
<div class="container">
<div ng-view></div>
</div>
</div>
</div>
<script src="./lib/jquery/jquery.min.js"></script>
<script src="./lib/bootstrap/bootstrap.min.js"></script>
<script src="./lib/angular/angular.min.js"></script>
<script src="./lib/angular/angular-route.min.js"></script>
<script src="maintenance.js"></script>
</body>
</html>
SCRIPT
angular.module('maintenance', ['ngRoute'])
.controller('adminCtrl', AdminCtrl)
.config(function ($routeProvider) {
$routeProvider.when('/locations', {
templateUrl: 'views/locations.html'
});
$routeProvider.when('/sites', {
templateUrl: 'views/sites.html'
});
$routeProvider.otherwise({
templateUrl: 'views/main.html'
});
});
function AdminCtrl($scope) {
}
I need to know if I have the correct way of thinking, watching this example, I would say that the '#' says to use the routing system, in the script we set the routes and the views the app should load based on the url, when I press the because of the # it search based on the routing system and passes the view to the ng-view, I don't know if the processing is correctly thats why I need to understand better how it works, sorry if I don't explained very well :/
Ps: sorry for my bad english
First and foremost, and angular.module('maintenance', ....) must match. I'm referring to the identifier 'maintenance'. Without this, your JS file won't find your HTML file.
From the JS file, you have angular.module('maintenance', ['ngRoute']), ngRoute is an angular directive for routing.
https://docs.angularjs.org/api/ngRoute
The $routeProvider says what page to go to.
http://www.w3schools.com/angular/angular_routing.asp
And templateUrl shows the URL for the page.
https://docs.angularjs.org/guide/directive
http://techfunda.com/howto/505/function-with-templateurl
I'm very sure you have the following html files in your project.
locations.html
sites.html
main.html
I'm trying to display main.html template via UI routing, but its not working for some reason. Can someone please point out the mistake in my code. Thank you.
appModule
"use strict";
angular.module("fleetOperate", ["ui.router", "mainModule"]);
UI Routing
"use strict";
angular.module('fleetOperate').config(function ($stateProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html'
})
});
mainModule
"use strict";
angular.module("mainModule", []);
main.HTML
<div class="icon-bar" ui-view="main">
<a ui-sref="" class="item">
<i class="fa fa-truck" style="font-size:48px;"></i>
<label>Fleet</label>
</a>
<a ui-sref="" class="item">
<i class="fa fa-users" style="font-size:48px;"></i>
<label>Drivers</label>
</a>
<a href="#" class="item">
<i class="fa fa-calendar" style="font-size:48px;"></i>
<label>Planner</label>
</a>
<a href="#" class="item">
<i class="fa fa-truck" style="font-size:48px;"></i>
<label>Trailors</label>
</a>
<a href="#" class="item">
<i class="fa fa-files-o" style="font-size:48px;"></i>
<label>Pod</label>
</a>
<a href="#" class="item">
<i class="fa fa-cog" style="font-size:48px;"></i>
<label>Settings</label>
</a>
<a href="#" class="item">
<i class="fa fa-square-o" style="font-size:48px;"></i>
<label>Control Center</label>
</a>
<a href="#" class="item">
<i class="fa fa-phone" style="font-size:48px;"></i>
<label>Communication</label>
</a>
<a href="#" class="item">
<i class="fa fa-user" style="font-size:48px;"></i>
<label>Customer Profile</label>
</a>
</div>
Index.HTML
<!DOCTYPE html>
<html ng-app="fleetOperate">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Truck Trackers</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link href="app/app.css" rel="stylesheet" />
<link href="app/main/main.css" rel="stylesheet" />
<script src="scripts/angular.js"></script>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/angular-ui-router.min.js"></script>
<script src="app/main/mainModule.js"></script>
<script src="app/appModule.js"></script>
<script src="app/appUI_Routing.js"></script>
</head>
<body class="container-fluid">
<header class="js-title-bar">
<div class="js-logo-area">
<img class="js-icon" ng-src="http://www.cam-trucks.com/images/2.jpg"/>
<div class="js-title-area">
<p class="js-logo-title"> <strong>Truck Tracker's</strong></p>
<p class="js-logo-subtitle">Where ever you GO, we FIND you !</p>
</div>
</div>
</header>
<div ui-view></div>
</body>
</html>
Update your UI Router:
angular.module('fleetOperate').config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("main");
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html'
})
});