I am new to angularjs ,i make a sample app with custom directives now i add routing as well but it doesn't working.When i start project nothing is displayed in browser.
here is my index.html:
<html ng-app="myApp">
<head>
<title>Reddit New World News (Task)</title>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script src="angular/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="myApp.js"></script>
<script src="myAppCtrl.js"></script>
<script src="routes.js"></script>
<script src="headerDirective.js"></script>
<script src="searchDirective.js"></script>
<script src="myDataDirective.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
myAppCtrl:
// TODO: Wrap in anonymous function
(function () {
var myApp = angular.module('myApp', ['ui.router']);
// TODO: min-safe with bracket notation
myApp.controller('myAppCtrl', ['$scope', '$http', function($scope, $http) {
$scope.sortType = '';
$scope.sortReverse = true;
// TODO: Keep lines short - it's easier to read
$http.get("https://www.reddit.com/r/worldnews/new.json")
.success(function (response) {
$scope.stories = response.data.children;
});
}]);
myApp.controller('aboutController',function(){
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
myApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
})();
headerDirective.html:
<div class="top-header"></div>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="header">
<h1>Reddit</h1>
</div>
<div class="header-right">
<h2>World's Latest News</h2>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
</div>
routes.js:
angular.module('myAppCtrl')
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index.html');
// See route.webapp.js for allowed routes
$stateProvider
.state('app', {
templateUrl: '/templates/app.html',
controller: 'myAppCtrl',
abstract: true
})
.state('app.home', {
url: '/home',
templateUrl: '/templates/index.html',
controller: 'myAppCtrl'
})
.state('app.about', {
url: '/about',
templateUrl: '/templates/about.html',
controller: 'aboutController'
})
.state('app.contact', {
url: '/contact',
templateUrl: '/templates/contact.html',
controller: 'contcatController'
});
$locationProvider.html5Mode(true);
}
]);
})();
any guide thanks.
First there is a problem with your config block :
myApp.config(...)
not
angular.module('myAppCtrl').config(...);
Else you're redeclaring a new module. That doesn't make sense. You mix up controllers and module, that's two different things.
Then you have to change some things in your HTML file :
If you're using UI-Router it's :
<div ui-view></div>
not like ngRouter :
<div ng-view></div>
Then you're using $locationProvider.html5Mode(true);
So you have to configure your server to emulate paging, see doc.
Finally you have to add the base href of your angular application in the <head> tag like that :
<base href="/">
Related
I want to use routeProvider in ngRoute in angularjs to view my home.html or delete.html or add.html
app.js
var app = angular.module('MyApp', ['ngRoute']);
MyApp.config([
'$routeProvider',
function($routeProvider) {
$routeProvider
.when('/Add', {
templateUrl: 'html/add.html',
controller: 'AddController'
})
.when('/Edit', {
templateUrl: 'html/edit.html',
controller: 'EditController'
})
.when('/Delete', {
templateUrl: 'html/delete.html',
controller: 'DeleteController'
})
.when('/Home', {
templateUrl: 'html/home.html',
controller: 'HomeController'
})
.otherwise({
redirectTo: '/Home'
});
}
]);
MyApp.controller('AddController', function($scope) {
$scope.message = "In add view"
});
MyApp.controller('DeleteController', function ($scope) {
$scope.message = "In delete view"
});
MyApp.controller('EditController', function ($scope) {
$scope.message = "In edit view"
});
MyApp.controller('HomeController', function ($scope) {
$scope.message = "In home view"
});
index.html
<!DOCTYPE html>
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- bootstrap css -->
<link href="Content/bootstrap.min.css" rel="stylesheet"/>
<!-- Jquery js -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/internal/app.js"></script>
</head>
<body>
<div class="container">
<nav role="navigation" class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Add</li>
<li class="">Edit</li>
<li class="">Delete</li>
</ul>
</nav>
<div ng-view>
</div>
<!-- Footer -->
<h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
</div>
</body>
</html>
When I run my application, and click on any of the links, it gives me this url: http://localhost:51285/html/#!Edit
And in the body is this...
HTTP Error 403.14 - Forbidden
The Web server is configured to not list the contents of this directory.
In the sample that I am following, it doesn't have that error it just changes to the message.
you have some mistake in your code :
in your html:using Add
2.in your app.js:instead of MyApp.config or MyApp.controller use app.config and app.controller.MyApp is name of your app but you must use variable that your app stored on it.
follwing will working:
your html:
<!DOCTYPE html>
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- bootstrap css -->
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<!-- Jquery js -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="internal/app.js"></script>
</head>
<body>
<div class="container">
<nav role="navigation" class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Add</li>
<li class="">Edit</li>
<li class="">Delete</li>
</ul>
</nav>
<div ng-view></div>
<!-- Footer -->
<h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
</div>
</body>
</html>
your app:
var app = angular.module('MyApp', ['ngRoute']);
app.config([
'$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/Add', {
templateUrl: 'html/add.html',
controller: 'AddController'
})
.when('/Edit', {
templateUrl: 'html/edit.html',
controller: 'EditController'
})
.when('/Delete', {
templateUrl: 'html/delete.html',
controller: 'DeleteController'
})
.when('/Home', {
templateUrl: 'html/home.html',
controller: 'HomeController'
})
.otherwise({
redirectTo: '/Home'
});
}
]);
app.controller('AddController', function ($scope) {
$scope.message = "In add view";
});
app.controller('DeleteController', function ($scope) {
$scope.message = "In delete view";
});
app.controller('EditController', function ($scope) {
$scope.message = "In edit view";
});
app.controller('HomeController', function ($scope) {
$scope.message = "In home view";
});
I hope it could be ralted with configuration. Please check the link below! Angular force an undesired exclamation mark in url
Here, I want to print 'Nerve Center Dashboard' when route is '/' ,'Consumption Dashboard' for '/consumption' and same for every route in <p> tag. Please help
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="assets/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="assets/bootstrap-3.3.7/js/bootstrap-3.3.7.min.js" type="text/javascript"></script>
</head>
<body ng-app="myapp">
<p></p> /------------*text to be printed*-------------/
<ul class="nav nav-tabs">
<li onclick="dashboardTitle('Nerve Center Dashboard')" id="nerve">Nerve Center
</li>
<li onclick="dashboardTitle('Consumption Dashboard')" id="consumptionn">Consumption Analysis
</li>
<li onclick="dashboardTitle('Fulfillment Dashboard')" id="fulfillmentt">Fulfillment Analysis
</li>
<li onclick="dashboardTitle('Inventory Dashboard')" id="inventoryy">Inventory Analysis
</li>
</ul>
<div class='col-xs-12 rmpm' style='height:auto;'>
<div ng-view></div>
</div>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
//routing for tabs
myApp.config(['$routeProvider',
function($routeProvider) {
// $locationProvider.html5Mode(true);
$routeProvider.
when('/', {
templateUrl: 'nervecenter.html',
controller: 'nervecenterController'
}).
when('/fulfillment', {
templateUrl: 'fulfillment.html',
controller: 'fulfillmentController'
}).
when('/consumption', {
templateUrl: 'consumption.html',
controller: 'consumptionController'
}).
when('/inventory', {
templateUrl: 'inventory.html',
controller: 'inventoryController'
}).otherwise({
templateUrl: 'nervecenter.html'
});
}
]);
</script>
</body>
</html>
You just have to create a global variable in angular's scope to initialize the <p> tag based on URL. Initialise the variable in each of the controllers with the desired value. You also have to create a main controller that will be in the scope of <p> tag, so that any initialization on $rootScope will reflect under this main controller.
Main Controller:
var myApp = angular.module('myApp', []);
myApp.controller('mainController', ['$scope','$rootScope' function ($scope,$rootScope) {
});
}]);
First Controller:
myApp.controller('nervecenterController', ['$scope','$rootScope' function ($scope,$rootScope) {
$rootScope.title="Nerve Center Dashboard"
});
}]);
Second Controller:
myApp.controller('consumptionController', ['$scope','$rootScope' function ($scope,$rootScope) {
$rootScope.title="Consumption Dashboard"
});
}]);
HTML:
<body ng-app="myapp" ng-controller="mainController">
<p>{{title}}</p>
Working Plunker: https://plnkr.co/edit/xmLZvHK57GpaIFsHzvvV?p=preview
I am a newbee to angular. in my web app i have a side bar loaded in a ui-view from template in the index page and there is another ui-view where i want to load template clicking links from the side bar. here are my codes and templates...please help me...
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body ng-app="testapp" ng-controller="mainCtrl">
<div class="container">
<div class="row">
<div class="col-md-4" ui-view="sidebar">
</div>
<div class="col-md-8" ui-view="content">
</div>
</div>
</div>
<!-- Javascript links and scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<script type="text/javascript">
var app = angular.module('testapp', ['ui.router']);
/*route configuration*/
app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('home');
$stateProvider.state('home',{
views:{
'sidebar':{templateUrl:'sidebar.html'},
'content':{templateUrl:'default.main.html'},
}
});
$stateProvider.state('home.page02',{
views:{
'content#home':{templateUrl:'page02.html'},
}
});
}]);
/*main controller at index page*/
app.controller('mainCtrl', ['$scope','$state', function ($scope,$state) {
$state.go('home');
}]);
</script>
</body>
</html>
<ul>
<li>home</li>
<li>page01</li>
<li>page02</li>
</ul>
<h2>Page 01 is here!</h2>
In ui-routing we can use ui-sref which takes the complete state name as its value
for example:
<li>page02</li>
and the controller should be like:
var app = angular.module('testapp', ['ui.router']);
/*route configuration*/
app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('home');
$stateProvider
.state('home',{
views:{
'sidebar':{templateUrl:'sidebar.html'},
'content':{templateUrl:'default.main.html'},
}
})
.state('home.page02',{
views:{
'content#home':{templateUrl:'page02.html'},
}
});
}]);
/*main controller at index page*/
app.controller('mainCtrl', ['$scope','$state', function ($scope,$state) {
$state.go('home');
}]);
<li>page02</li>
ui-sref must contain a state name. if you want to go to home.page02 it should be
<li>page02</li>
and no need to give every time $stateProvider.state()
Just do it like
$stateProvider
.state('home', {url: '', template: ''})
.state('home.page02', {url: '', template: ''})
And named-views usage https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views go through the link provided. It is awesome
i changed the script...
app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('home');
$stateProvider
.state('home',{
views:{
'sidebar':{templateUrl:'sidebar.html'},
'content':{templateUrl:'default.main.html'},
}
})
.state('home.page02',{
views:{
'content#':{templateUrl:'page02.html'},
}
});
}]);
My angular routing is not working (clicking link does not cause route change):
var smu72App = angular.module("smu72App", [
"ngRoute"
]).
config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "/templates/home.html",
controller: 'smu72Controller'
})
.when("/objects", {
templateUrl: "/templates/objects.html",
controller: 'smu72Controller'
})
.when("/object/:Id", {
templateUrl: '/templates/object.html',
controller: 'smu72Controller'
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
});
That's main page that hold ng-view (cutted a bit for better reading):
<!DOCTYPE html>
<html ng-app="smu72App">
....
<base href="/">
.....
<body data-spy="scroll" data-target="#navbar" data-offset="0">
...
<div class="collapse navbar-collapse"> //THAT'S SCROLLSPY LINKS (NOT ANGULAR)
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home" aria-hidden="true"></i></li>
<li> УСЛУГИ</li>
<li> OБЪЕКТЫ</li>
<li> OТЗЫВЫ</li>
<li> СЕРТИФИКАТЫ</li>
<li> КОНТАКТЫ</li>
</ul>
</div>
</div>
</div>
<div ng-view></div>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.3/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.3/angular-resource.min.js"></script>
<script src="Scripts/simplbox.min.js"></script>
<script src="http://localhost:25018/Scripts/main.js"></script>
<script src="http://localhost:25018/Scripts/app.js"></script>
<script src="http://localhost:25018/Scripts/smu72Controller.js"></script>
</body>
</html>
Declare your module first
angular.module("smu72App", ["ngRoute"]);
Then initialize config
angular.module("smu72App").config("....ur routes in here");
Are you getting any console errors?
I have noticed one morething that ur anchor tag href doesn't match with the routes in ur config section except ur home page and that is why ur home page is loading fine.
Just an example try ur anchor tag like this <a href="#/about"> or like <a href="/about"> coz i think ur not using hash
and create ur route like below
$routeProvider.when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutCtrl'
});
Today i spent a whole day figuring out what was going wrong. For some reason when i click on app.main.foo and using version 0.2.13 of UI-Router this example works. But the exact same thing with version 0.2.15 i have to double click before my header and sidebar are loaded. I could simply use version 0.2.13 as this would fix my problem but is this a know issue or has somethings change since the latest version. This is my demo application :
index.html
<!DOCTYPE html>
<html ng-app="app" ng-strict-di>
<head>
<!--#version v1.4.7-->
<script src="angular.js"></script>
<!--#version v0.2.15
Header and side bar shows only after double clicking app.main.foo
<script src="angular-ui-router.js"></script>
-->
<!--Best version for this example -->
<script
src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="route.js"></script>
</head>
<body>
<ul>
<li><a ui-sref="app.login">app.login</a>
<li><a ui-sref="app.main">app.main</a>
<li><a ui-sref="app.main.foo">app.main.foo</a>
</ul>
<div ui-view=""></div>
<script type="text/ng-template" id="views/login.html">
<div>
Login view
</div>
</script>
<script type="text/ng-template" id="partials/sidebar.html">
<div>
<h3>SideBar View1</h3>
<div ui-view="sidebar"></div>
</div>
</script>
<script type="text/ng-template" id="partials/main.html">
<h3>Main View</h3>
</script>
<script type="text/ng-template" id="partials/header.html">
<h3>Header View</h3>
</script>
<script type="text/ng-template" id="views/layout.html">
<h2>Layout View</h2>
<div ui-view="header"></div>
<div ui-view="sidebar"></div>
<div ui-view="main"></div>
</script>
</body>
</html>
app.js
(function() {
'use strict';
angular
.module('app', ['ui.router'])
}());
route.js
(function() {
'use strict';
angular
.module('app')
.config(routesConfig);
routesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function routesConfig( $stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app', {
abstract: true,
url: '/',
template: '<ui-view/>'
})
.state('app.login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
controllerAs: 'login',
url: ''
})
.state('app.main', {
url: 'room',
templateUrl: 'views/layout.html'
})
.state('app.main.foo', {
url: '',
views: {
'header': {
templateUrl: 'partials/header.html'
},
'sidebar': {
templateUrl: 'partials/sidebar.html'
},
'main': {
templateUrl: 'partials/main.html'
}
}
});
}
})();