I seem to be losing scope on my angular controller when I am trying to abstract my Angularjs modules.
It works fine if i use my app module, but as soon as I change the home.js module to app.layout, $scope no longer works.
Can anybody spot an issue here?
_Layout.html (left out includes and head)
<body class="docs-body" ng-app="app">
<div layout="column" ng-cloak>
<section layout="row" flex>
<div ng-include="'App/layout/sidenav.html'"></div>
<md-content class="_md layout-column flex" layout="column" flex="">
<div ng-include="'App/layout/toolbar.html'"></div>
<div class="container body-content">
#RenderBody()
</div>
</md-content>
</section>
</div>
</body>
#RenderBody() brings up Index.html
<!-- this is where content will be injected -->
<div ng-view></div>
Home.html
<div>
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>
My app.js
angular.
.module('app', [
'app.core',
'app.layout',
]);
})();
layout.module.js
(function () {
'use strict';
angular.module('app.layout', [
'ngAnimate',
'ngMaterial',
'ngAria'
]);
})();
core.module.js
(function () {
'use strict';
angular.module('app.core', [
'ngRoute'
]);
})();
and route.js:
angular.module('app.core')
.config(function ($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'App/layout/home.html',
controller: 'home'
});// End routeprovider
})// end config
And Finally the culprit... Home.js
(function () {
'use strict';
console.log('registering controller home before Angular');
angular
.module('app.layout')
.controller('home', home);
home.$inject = ['$scope'];
function home($scope) {
console.log('registering controller home');
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
}
})();
Now, When i have
.module('app);
.controller('home', home);
on home.js, the $scope.message displays
'Everyone come and see how good I look!'
but if i have
.module('app.layout')
.controller('home', home);
it displays
{{message}}
I know I'm losing scope somehow here, but I cant figure out how to fix it! Do I need to declare the controller again outside of the Router?
I think Angular not able to get your home controller. You should inject app.layout in app.core module.
angular.module('app.core', ['app.layout'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'App/layout/home.html',
controller: 'home'
});// End routeprovider
})// end config
angular.
.module('app.layout',[]).controller();
The solution was rather frustrating. Using Visual Studio's Bundle config, It was adding the home.js file in before it compiled the module files. In doing so, when it tried to build and register the controller, It couldn't find the module. solution was to build all modules first then build controllers by specifying build order in the bundle config.
Related
This is my very first AngularJs app and created it after going through many examples on the web but I am doing something wrong here. It is highly likely because files are stored in dedicated folders. The HomeView.html template gets loaded fine but the controller doesn't. I mean I cannot get greetingMessage printed in the template. All I see is {{ greetingMessage }} instead of "Welcome!". What am I missing?
Error
Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.4/$controller/ctrlreg?p0=HomeController
App Structure
app
conponents
home
HomeView.html
HomeController.js
...
...
index.js
index.html
index.html
<body ng-app="myApp">
<h3>AngularJS</h3>
<hr />
<p>Home</p>
<div ng-view></div>
<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.min.js"></script>
<script src="index.js"></script>
</body>
index.js
var module = angular.module('myApp', ['ngRoute']);
module.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'components/home/HomeView.html',
controller: 'HomeController'
// I tried -> controller: 'components/home/HomeController'
})
.otherwise({
redirectTo: '/'
});
});
HomeView.html
<div ng-controller="HomeController">
<h4>Home</h4>
<p>{{ greetingMessage }}</p>
</div>
HomeController.js
var module = angular.module('myApp', []);
module.controller('HomeController', [
'$scope',
function(
$scope
) {
$scope.greetingMessage = 'Welcome!';
}]);
The main reason is you haven't referred homeController.js on index.html, it should place right after index.js. This will not solve your issue. The other thing I'd like to mention is, you shouldn't be creating myApp module again while registering your controller with your myApp module. By declaring new module will flush out former registered component. So just use module getter like angular.module('myApp') and append further components to it.
<script src="components/home/HomeController.js">
Code
angular.module('myApp')
.controller('HomeController', [ '$scope',
function($scope) {
$scope.greetingMessage = 'Welcome!';
}
]);
You must be attach app file and next attache your controller file in your hoem page or master page.
This example helped you
Angular js routing
I started a project form the Angular Seed Project. I've done a few Angular projects before, but this is the first one I have setup from scratch. I don't remember having to add new modules to the "app level module" before. Seems like there is a way to automate this, but my Google-Fu is failing me.
Basically, I'm looking for a way to remove 'myApp.home' and such from app.js so that I don't have to always add new pages to the app.js. I know some modules will need to go there, but adding every page there seems like a pain. I already figured out how to automate adding the script references to index.html
//////////////////// APP.JS ////////////////////
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.home'
])
.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({ redirectTo: '/home' });
}]);
//////////////////// HOME.JS ////////////////////
'use strict';
angular.module('myApp.home', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/home', {
templateUrl: '../app/home/home.html',
controller: 'HomeCtrl'
});
}])
.controller('HomeCtrl', [function () {
}]);
<!---------- INDEX.HTML ---------->
<html>
<head>
<title>My App</title>
</head>
<body>
<h1>My App</h1>
<div ng-view></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
</body>
</html>
<!---------- HOME.HTML ---------->
<div>TEST</div>
if you will not create a new module for each new page, but use myApp module, then you do not need to add it as dependency to the myApp module. Each page will have its own JS file:
//////////////////// HOME.JS ////////////////////
'use strict';
angular.module('myApp')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/home', {
templateUrl: '../app/home/home.html',
controller: 'HomeCtrl'
}
);
}])
.controller('HomeCtrl', [function () {
}
]);
I have a very simple configuration that is not working. The ui view is not rendering the template.
HTML:
<ul>
<li>Home</li>
<li>Register</li>
</ul>
<div ui-view></div>
<script src="/src/client/app/app.js"></script>
<script src="/src/client/app/config.js"></script>
AppJS
(function () {
'use strict';
angular.module('barmehealth', ['ui.router'])
.controller('RegisterCtrl', function($scope) {
});
}());
ConfigJS
(function () {
'use strict';
var core = angular.module('barmehealth');
core.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('register', {
url: '/register',
templateUrl: '/views/register.html',
controller: 'RegisterCtrl'
});
});
}());
When I go to the route by clicking on the link to register, the ui view renders the entire html page with the view tag and not the template which is given in the state.
https://www.dropbox.com/s/brm99i3thsw30h6/Screen%20Shot%202016-03-29%20at%209.15.14%20AM.png?dl=0
I had the path wrong in the templateUrl. It should have been
templateUrl: '/app/views/register.html'
Does anyone know if it is a default behavior for the view tag to load the surrounding html?
i have two html pages which are named main.html and detail.html. When click the link button in main,i wanna open detail page for details.
Main.html:
<body ng-app="MyApp" ng-controller="mainController">
<div data-role="page" data-theme="b">
<a ng-href="detail.html"></a>
</div>
</body>
detail.html:
<div data-role="page" data-theme="b" ng-controller="DetailContoller">
<button>{{a}}</button></div>
Contoller:
MyApp.controller("mainController", function ($scope, $http, OranService, $location) {
$scope.a = 5;
$scope.items = [];});
MyApp.controller('DetailController', function ($scope, OranService) {
$scope.a = 1;});
When Click the link button in the main page, i see only a button which text {{a}}, and my url:'localhost/Main.html'. I dont want use target=_self vs. if i use ,when return click button press, main page will reload.
Do you have any suggestion?
Thanks!
Looks like you're mixing jQuery Mobile and Angular notation.
To implement navigation in Angular you can use the core Angular service $routeProvider. You have to include the ng-route module for this.
Here's an example of how to config this on your module:
angular.module('app', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/page1', {
templateUrl: 'page1.html',
controller: 'Page1Ctrl'
})
.when('/page2', {
templateUrl: 'page2.html',
controller: 'Page2Ctrl'
})
.otherwise({
redirectTo: '/page1'
});
}]);
Now in your html, use the directive ng-view to specify the tag that should contain the template.
<body ng-app="app">
<div ng-view>
</div>
</body>
I am kind of new to angular JS and this might be the simple question but i am stuck on this.
What i am trying to do is, I have one page and on that page I want to add a template. My template is kind of dynamic and have it's own controller. My code is something like this..
-- Main Page HTML --
<html ng-app="myApp">
<body ng-controller="MyAppCtrl">
<my-component>
</my-component>
</body>
</html>
-- Main page JS --
var myAppModule = angular.module('myApp');
myAppModule.controller('MyAppCtrl', function ($scope) {
})
.directive('myComponent', function () {
return {
restrict: 'E',
templateUrl: 'myComponent.aspx'
};
});
-- Template(myComponent.aspx) --
<html>
<!-- include template script -->
<body ng-controller="ComponentCtrl">
<div ng-click="showAlert()">
myBtn
</div>
</body>
</html>
-- Template page JS --
var templareModule = angular.module('myApp', []);
templareModule.controller('ComponentCtrl', function ($scope, $http) {
$scope.showAlert = function () {
alert("clicked");
}
});
So for this I am unable to get alert on click.
Thanks in advance.
You really don't need to create a custom directive to be able to do what you describe in your question and since you're a beginner I would suggest you start simple and do without the directive. You will need to use the ng-view tag and routing. There are some other minor issues with your code, some of which were already pointed out by others in the comments. The following code worked for me.
index.html:
<html ng-app="myApp">
<body>
<h1>Test</h1>
<div ng-view></div>
<script> (Insert paths to required Angular scripts and your JS files)</script>
</body>
</html>
App JS file:
Note: You will need to download the ngRoute JavaScript file from Angular's website and include it in your project to get the routing to work correctly. (Go to Downloads on their website, pick your version of Angular, then download ngRoute)
angular.module('myApp', [ 'ngRoute' ])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'myComponent.aspx',
controller: 'ComponentCtrl'
})
}])
.controller('ComponentCtrl', function ($scope) {
$scope.showAlert = function () {
alert("clicked");
}
});
myComponent.aspx:
<div class="ComponentCtrl">
<div ng-click="showAlert()">
myBtn
</div>
</div>
Let me know if you have questions or are still unable to get it to work. I would also suggest you check out some tutorial videos on Egghead.io's website. It helped me figure out the basics of Angular.