I have an MVC application with Header and Content using Angularjs.
I have defined an ng-app in Content and load the content pages using $routeProvider. This is working fine.
I have a link in Header from where I want to show a page in Content area - this is outside of the ng-app. How can I do this without setting ng-app at the top ? Also suggest if there is some other way to accomplish the same, as many Master page websites are built around this UI design only.
Below is my code showing Master.cshtml and app.js. Let me know incase I need to provide some more code -
Master.cshtml -
#inherits WebViewPage
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
<title>#ViewBag.PageTitle</title>
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angularjs/app.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<li><a ng-href="#/headerLinkPage1">View cart</a></li>
</div>
</div>
</nav>
<div class="container-fluid" ng-app="rootApp">
<div ng-view></div>
</div>
</body>
</html>
app.js -
var serviceBaseAddress = 'http://localhost/MyWebApi/api/';
var rootApp = angular.module('rootApp', ['ngRoute', 'contentPage1', 'headerLinkPage1'])
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/contentPage1', {
templateUrl: '../ContentPage1/Index'
}).
when('/headerLinkPage1', {
templateUrl: '../HeaderLinkPage1/Index'
}).
otherwise({
redirectTo: '/contentPage1'
});
}]);
If I understand you question correctly, you want modularity in your angular routes, you can use ui router to achieve this, I basically created a main app called app and then two sub apps called app1 and app2, try http://plnkr.co/edit/sk5EmMWQgcIfYlOteWtt , Let me know if thats not what you are looking for
(function() {
angular.module('app1', [])
.config(function($stateProvider) {
$stateProvider
.state('app1', {
url: '/app1',
abstract: true,
template: '<div ui-view="app1View"></div>'
})
.state('app1.child1', {
url: '/child1',
views: {
'app1View' : {
template: '<div>child 1, app 1</div>'
}
}
})
})
})();
(function() {
angular.module('app2', [])
.config(function($stateProvider) {
$stateProvider
.state('app2', {
url: '/app2',
abstract: true,
template: '<div ui-view="app2View"></div>'
})
.state('app2.child1', {
url: '/child1',
views: {
'app2View' : {
template: '<div>child 1, app 2</div>'
}
}
})
})
})();
So this way your sub modules app1 and app2 are completely independent of each other and you can add or remove more sub modules or sub routes within each of these sub modules
Related
I am building a website using angularJS and PHP. Website has many pages like- Home, About Us etc.
So, I have created a common header for the website which I included in my HTML view like this:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="commonController.js"></script>
<script src="homeController.js"></script>
<script src="loginController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-controller="CommonController"
ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
and the header (header.html) page looks like this:
<nav class="navbar-inverse navbar-fixed-top" role="navigation">
Home
<a href="#/notifications" >{{vm.commonId}}</a>
</nav>
and header controller has a http call which fetches user id and I am trying to show this id as a label for one of the links mentioned above (commonController.js)
(function() {
angular
.module('myApp.common', ['ngRoute'])
.factory('myCommonService', function($http) {
var baseUrl = 'api/';
return {
getBasicUserInfo:function() {
return $http.get(baseUrl + 'getBasicUserInformation');
}
};
})
.controller('CommonController', function($scope, $routeParams, myCommonService) {
var vm = this;
myCommonService.getBasicUserInfo().success(function(data) {
vm.commonId = data.id;
});
});
})();
But when I navigate through pages, header remains same. So, I'm not able to initiate that http call. There are many pages in my website.
Can this be done? I'm pretty much new to this platform.
Route (app.js)
(function() {
angular.module('myApp', [
'ngRoute',
'myApp.login',
'myApp.home',
'myApp.common'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'loginView.html',
controllerAs: 'vm'
})
.when('/home', {
controller: 'HomeController',
templateUrl: 'homeView.html',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/login'
});
}]);
})();
P.S: I excluded other pages to reduce complexity and make my query easy to understand.
Thanks!
Seems to me all that is missing is letting the template know the scoped alias for the controller
<div class="header" ng-controller="CommonController as common"
ng-include="'header.html'"></div>
and in header.html
{{common.commonId}}
Note that I've used common instead of vm as some of your routes are using vm and it's best to avoid conflicts.
If you want to trigger an update on page navigation (ie, route change), change your CommonController to this
.controller('CommonController', function($scope, myCommonService) {
var ctrl = this;
var update = function() {
myCommonService.getBasicUserInfo().then(function(res) {
ctrl.commonId = res.data.id;
});
};
update();
$scope.$on('$routeChangeSuccess', update);
});
You should be able to do this:
.when('/login', {
controller: 'LoginController',
templateUrl: 'loginView.html',
resolve: function(){ //your code here }
controllerAs: 'vm'
})
instead of getting it from the controller
I think that your issue might be that the include can't read the controller, so instead try this:
<nav class="navbar-inverse navbar-fixed-top" role="navigation" ng-controller="CommonController as vm">
Home
<a href="#/notifications" >{{vm.commonId}}</a>
</nav>
Note that you're also missing the controllerAs syntax so I added that.
And remove ng-controller from here:
<div class="header" ng-include="'header.html'"></div>
I am newer to Angular so this could be a really simple/stupid issue but after googleing and trying many things I couldnt get it to work.
I believe this may not be directly related to the image viewer but a general issue when trying to add additional functionality injected into the code (like this: angular.module('app', ['angular-flexslider']);) I tried with a couple other things and had same issue so it may be a general issue on how I have my code setup when adding this that is breaking everything including the routing (but routing is the only real functionality I have currently.
If I have stand alone pages for the image viewer it works fine but incorporating it with other code causes the issue.
var app = angular.module('app', ['angular-flexslider']);
if I change the "app" to "app1" it does not cause all routing to break, so it is not the script tags being added that is causing the issue itself, but something with this and how I have the code setup (something is getting cross wired I think).
The code for my pages that are important are:
index:
<!DOCTYPE html>
<html ng-app="app">
<head>
<base href="/" />
</head>
<body>
<link rel="stylesheet" href="styles/styles.css">
<div class="header">
<div class="container">
<img src="/images/DPLogo.jpg" />
<h1>Downriver Panters</h1>
</div>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>History</li>
<li>Coaches</li>
<li>Activities</li>
<li>Calender</li>
<li>Gallery</li>
<li>Fundraisers</li>
<li>Links</li>
<li>Contact Us</li>
<li>Test Styles</li>
</ul>
</div>
</div>
<div class="content">
<div class="container">
<div ng-view>ViewPage</div>
</div>
</div>
<div class="footer">
<div class="container">
© Copyright 2016
</div>
</div>
<!-- this is code for the image viewer that is causing it to break (but also add the app.js file below)-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.3.0/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="//cdn.jsdelivr.net/flexslider/2.2.2/jquery.flexslider-min.js"></script>
<script src="/testing/angular-flexslider.js"></script>
<script src="/scripts/angular.min.js"></script>
<script src="/scripts/angular-route.min.js"></script>
<!-- end of code causing it to break -->
<!-- my main control with the routing -->
<script src="/controllers/mainCtrl.js"></script>
<!-- have to put here?? so below mainCtrl??? cause not working if put on home page -->
<script src="/controllers/homeCtrl.js"></script>
<script src="/controllers/calenderCtrl.js"></script>
<script src="/controllers/coachesCtrl.js"></script>
<script src="/controllers/galleryCtrl.js"></script>
<!-- other file for routing that is causing it to break-->
<script src="/testing/app.js"></script>
</body>
</html>
mainCtrl.js (with my routing code)
(function () {
'use strict';
var app = angular.module('app', ['ngRoute']);
// configure our routes
app.config(['$routeProvider','$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
// catch all go home
.when('/', {
templateUrl: '/partials/home.html',
controller: 'homeController'
})
// route for the home page
.when('/home', {
templateUrl: '/partials/home.html',
controller: 'homeController'
})
// route for the about page
.when('/about', {
templateUrl: '/partials/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/history', {
templateUrl: '/partials/hisotry.html',
controller: 'hisotryController'
})
// route for the contact page
.when('/coaches', {
templateUrl: '/partials/coaches.html',
controller: 'coachesController'
})
// route for the contact page
.when('/activities', {
templateUrl: '/partials/activities.html',
controller: 'activitiesController'
})
// route for the contact page
.when('/calender', {
templateUrl: '/partials/calender.html',
controller: 'calenderController'
})
// route for the contact page
.when('/gallery', {
templateUrl: '/partials/gallery.html',
controller: 'galleryController'
})
// catch all go home
.when('/fundraisers', {
templateUrl: '/partials/fundraisers.html',
controller: 'fundraisersController'
})
// catch all go home
.when('/links', {
templateUrl: '/partials/links.html',
controller: 'linksController'
})
// route for the contact page
.when('/contactus', {
templateUrl: '/partials/contactus.html',
controller: 'contactusController'
})
// catch all go home
.when('/styletesting', {
templateUrl: '/partials/styleTesting.html',
controller: 'styletestController'
})
// happens when nothing specificed
.otherwise({
redirectTo: '/'
})
// not working/finding sites
// if you don't wish to set base URL then use this
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
}]);
})();
the code fot the app.js (the control for the page for the image viewer:
var app = angular.module('app', ['angular-flexslider']);
app.controller('MainCtrl', function ($scope) {
var ctrl = this;
$scope.prod = { imagePaths: [] };
$scope.prod.imagePaths = [
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg' },
{ custom: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg', thumbnail: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg' }
];
});
Finally the partial for the image viewer/gallery page
<div id="container" ng-controller="MainCtrl">
<div class="col-sm-12">
<flex-slider slider-id="slider" flex-slide="image in prod.imagePaths track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" init-delay="100">
<li>
<img ng-src="{{image.custom}}">
</li>
</flex-slider>
</div>
<div class="col-sm-12">
<flex-slider slider-id="carousel" flex-slide="image in prod.imagePaths track by $index" animation="slide" animation-loop="false" item-width="210" item-margin="5" as-nav-for="#slider" slideshow="false" control-nav="false">
<li>
<img ng-src="{{image.thumbnail}}">
</li>
</flex-slider>
</div>
</div>
You have to inject all of your modules in a single call, so you would use:
var app = angular.module('app', ['ngRoute','angular-flexslider']);
The way you are currently doing it your module is destroy when add the second module to it.
I have an issue in AngularJS when I'm trying to use ui-view.
The controller only stay visible if I declare the script inside the full page.
If I need to do this with every controller that I create, I am going to have a lot of controllers inside of my index page instead of a single controller inside of a page.
In Asp.net MVC, I can use the RenderSection function.
There is my code:
Index.html
<html lang="en">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
<script src="Scripts/venus.js"></script>
<script src="Scripts/controllers/conteudoController.js"></script>
</head>
<body ng-app="VenusApp">
<div class="container">
<div class="row">
<div class="col-md-3">
<p class="lead">Shop Name</p>
<div class="list-group">
Category 1
Category 2
Category 3
</div>
</div>
<div class="col-md-9" ui-view="">
</div>
</div>
</div>
</body>
</html>
and my second page is only a html table.
Sorry for any issue, but this is my first post in stackoverflow.
Its seems like your problem is that even though you do not require some other controller, you still need to inject in the main index.html prior to that controller is even used right?
In Angularjs you can use $ocLazyLoad module which will let you load the controller only when it is required.
You will configure which controller is require when, while you define your routing configration in angularjs config.
This is how it can be done.
$stateProvider
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'views/login.html',
resolve: {
loadMyFiles: function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'Myapp',
files: [
'scripts/controller/login.js'
]
})
}
}
}).state('reset', {
url: '/reset/token/:token',
controller: 'ResetCtrl',
templateUrl: 'views/reset.html',
resolve: {
loadMyFiles: function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'Myapp',
files: [
'scripts/controller/reset.js'
]
})
}
}
}).state('verify', {
url: '/verify',
controller: 'VerifyCtrl',
templateUrl: 'views/verify.html',
resolve: {
loadMyFiles: function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'Myapp',
files: [
'scripts/controller/verify.js'
]
})
}
}
})
Not only your controller JS , you can even lazy load the css.This will help you reduce loading tons of JS and css all in index.html.
Note : I am not using ng-route ,instead i am using ui-router.Above code is ui-router + $ocLazyLoad
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="/">
ngRoute not working while no errors are reported to console .
given no errors to console, how is it possible to follow execution of ngRoute procedures ?
i saw examples using $locationProvider.html5Mode(true), i don't understand when that should be used but i don't think it is required to make ngRoute work.
index.html has navigation links and ngView :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="bower_components/angular/angular.js"> </script>
<script src="bower_components/angular-route/angular-route.js"> </script>
<script src="main.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> first partial </li>
<li> second partial </li>
</ul>
<div ng-view></div>
</body>
</html>
main.js defines the router and the controllers :
var Main = angular.module('Main', ['ngRoute']);
function router($routeProvider) {
var route = {templateUrl: 'partials/default.html'};
$routeProvider.when('', route);
route = {
templateUrl: 'partials/first.html',
controller: 'first'
};
$routeProvider.when('content/first', route);
route = {
templateUrl: 'partials/second.html',
controller: 'second'
};
$routeProvider.when('content/second', route);
}
Main.config(['$routeProvider', router]);
Main.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
Main.controller('second', function($scope) {
$scope.list = [1,2,3];
});
partials simply make use of ngRepeat:
<header> First content </header>
<p ng-repeat="iter in list">
first
</p>
solved :
my problem was that my whole application is located under /ang/ prefix, and after adding that prefix to urls now it is working .
shouldn't there be a way to use relative urls ? i guess there should and i will try to fix it .
the problem is NOT with the different syntax as everyone suggested, and that is alarming to the fact many JS developer do not in fact understand the one line syntax that they are using everywhere .
Please check this code
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
<script src="script.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> first partial </li>
<li> second partial </li>
</ul>
<div ng-view></div>
</body>
</html>
Js file
var app = angular.module('Main', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/content/first', {
templateUrl: 'first.html',
controller: 'first'
}).
when('/content/second', {
templateUrl: 'second.html',
controller: 'second'
});
}]);
app.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
app.controller('second', function($scope) {
$scope.list = [1,2,3];
});
first page HTML
<header> First content </header>
<p ng-repeat="item in list">
{{item}}
</p>
here is your working code click
Do not reuse the route object as it might cause problems. Consider using it in the form (as suggested by the docs https://docs.angularjs.org/api/ngRoute/service/$route#example ):
$routeProvider
.when('content/second', {
templateUrl: 'partials/second.html',
controller: 'second'
});
If you want to debug the routes that angular goes through, you might want to look at angular's interceptors: https://docs.angularjs.org/api/ng/service/$http#interceptors
Also, $locationProvider.html5Mode(true) is not needed to make ngRoute work. It is simply a way of defining how the URLs should look like and work. in HTML mode you can change the links to not use # anymore and simply be www.yoursite.com/app/content/second instead of www.yoursite.com/app#content/second
your route configuration is not correct, you assume route function is execute for each and every link u click but its not.
so your route function should be like
function router($routeProvider) {
$routeProvider.
when('/content/first', {
templateUrl: 'partials/first.html',
controller: 'first'
}).
when('/content/second', {
templateUrl: 'partials/second.html',
controller: 'second'
}).
otherwise({
templateUrl: 'partials/default.html'
});
}
note that urls should be like <a href="#/content/first"> // note the slash after #
to match that the routes in route function should be like when('/content/first', { note the leading slash
here is the working Plunker
Define your Routes in routes.js
var route = angular.module('route', ['ngRoute']);
route.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.html",
controller : 'homeCtrl'
})
.when("/home", {
templateUrl: "views/home.html",
controller : 'homeCtrl'
})
.when("/product", {
templateUrl: "views/product-info.html"
})
.otherwise({redirectTo :'/'});
});
Attach the router to your Main Module.
angular.module('myApp', ['route']);
Import both the scripts in your index.html