I have been struggling with this problem for the past few days, and now i believe its time to reach out to the community for some help.
I am creating a website using the MEAN stack, this is my first time using Angular JS so i am a noobie.
The problem I am having is, I am not able to render ANY $scope data in my view. this has been driving me crazy because the AngularJS chrome debugger shows that the $scope data is there!!! But it wont render in my template.
App Structure
/public
/js
/controllers
-user.js
-app.js
/views
-index.html
Contents of my html - i will not copy entire file, only angular parts.
<!doctype html>
<html ng-app="PCT">
<div ng-controller="userController" class="column">
<a class="dropdown-toggle" data-toggle="dropdown" href="#userinfo" >
<img ng-src="{{user.img}}" style="width:40px; height:50px;" />
</a>
<ul class="dropdown-menu" role="menu">
<li><strong>{{user.name}}</strong></li>
<li><a ng-click="logOut()">Sign Out</a></li>
<li>Admin Site</li>
</ul>
</div>
<script src ="js/app.js"></script>
<script src="js/controllers/user.js"></script>
Contents of my app.js
angular.module('PCT.userController',[]);
//Importing all modules into main module
angular.module('PCT',['PCT.userController']);
Contents of my user.js (Controller)
angular.module('PCT').controller('userController', ['$scope', function($scope){
$scope.user = {
img : 'http://path/to/usr/img/user.jpg',
name : 'mcutalo'
};
$scope.logOut = function(){
console.log('logging out');
}
}]);
I am able to click on the Logout button in my menu, and this will trigger the console log, so it is making it to the controller. But it wont display my $scope data at all.
I am not sure what your question was, but if "PCT" is your module (it should match the name ng-app and the app.module("PCT") and no need to inject controller if u are defining controller using
angular.module('PCT').controller('userController', ['$scope', function($scope){
}]);
Here is the plnkr of the working one.
Updated with the Logout and it is called console.log...
http://plnkr.co/edit/uSLVqEayCh2XeeGI7LZe?p=preview
Let me know if any further help is needed.
Related
I'm new to angular and I think I'm doing this right but I'm not sure. I just got pushed into a project without much help and I'm trying to figure this out. I need to make some data using a tree view. The old code was using ng-repeat so I need to do something like that. I found a library that can help with that called treeRepeat. I have 0 experience using npm or bower so I just downloaded "module.js" and "tree-repeat.js" and added it to the project and then added it to a bundle and called it in my html page but I get a error injecting module error and I can't figure out why.
I have the error link at bottom but its a huge link and I have no idea on how to hyperlink it.
App.js
var app = angular.module('app', ['angularFileUpload', 'ngSanitize', 'ui.mask', 'ui.select', 'ui.bootstrap', 'ui.bootstrap.tpls', 'angular.filter', 'smart-table', 'colorpicker.module', 'sf.treeRepeat'])
.config(function ($httpProvider) {
//make delete type json to facilitate passing object
//to our generic method.
$httpProvider.defaults.headers["delete"] = {
'Content-Type': 'application/json;charset=utf-8'
};
});
EDIT: New error when I changed the bundle order. It now goes jquery first, treerepeat, and then angularjs.
https://docs.angularjs.org/error/$injector/nomod?p0=sf.treeRepeat
Calling code:
<div class="row">
<ul>
<li sf-treepeat="role in vm.roles">
{{role.RoleName}}
<ul>
<li sf-treecurse></li>
</ul>
</li>
</ul>
Bundle Order (The 2 files I added with tree-repeat are at the end of the angularjs bundle:
#section scripts {
#Scripts.Render("~/bundles/manageUser")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/angularjs")
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
}
I'm building a dashboard similar to this one Admin Dashboard Theme
I'm implementing the Right Side SideBar as show in the screenshot
My App code structure is something like:
index.html:
<div ui-view=""></div>
main.html
<div ui-view=""></div>
<div ng-include='"app/dashboard/sidebar.html"'></div>
I have done nesting of view in my main.html where I'm injecting different views. Also, since my right side sidebar is fixed, I want it to be common in all the main views. So, I have just included it in my main.html.
Now, the problem is somehow my sidebar.html is getting initialized again and again no matter if I scroll my page down or perform any action inside sidebar. I have verified it by printing console logs for every controller function which are used in sidebar.html view.
This problem is related to my this post: Earlier, I wasn't able to figure out the actual issue.
Following is my controller and jade code:
angular.module('myApp')
.controller('SidebarCtrl', function($scope, $rootScope) {
$scope.message = {};
$scope.addSideBarToggleClass = function() {
console.log("addSideBarToggleClass");
return true;
}
$scope.getStatusClass = function(status) {
console.log("getStatusClass");
return 'is-online';
}
$scope.openChat = function(receiver) {
console.log("openChat");
}
// etc...
});
<aside ng-class="{ 'control-sidebar-open' : addSideBarToggleClass()}"
ng-controller="SidebarCtrl">
<ul>
<li ng-class="{active: isTabSelected('chat')}">
<a data-toggle="tab" ng-click="updateCurrenTab('chat')"></a>
</li>
<li ng-class="{active: isTabSelected('home')}">
<a data-toggle="tab" ng-click="updateCurrenTab('home')"></a>
</li>
</ul>
<div>
<div ng-class="{active: isTabSelected('home')}">
<h3>Recent Activity</h3>
</div>
<div ng-class="{active: isTabSelected('chat')}">
<div>
<h4>Chat {{noOfUsersOnline}}</h4>
<div>Friends
<a href="#" ng-repeat="user in users" ng-click="openChat(user)">
<span ng-class="getStatusClass(user.status)"></span>
{{user.name}}</a>
</div>
</div>
</div>
</div>
</aside>
I see many logs of "addSideBarToggleClass", "getStatusClass" and every time I click on openChat, I see a log of "openChat" and then again "addSideBarToggleClass" and "getStatusClass"
Can anyone please point out what can be the possible problem for this behavior?
You need to familiarize yourself with the concept of a digest loop in Angular.
In short, every time a digest loop runs, all expressions, e.g. {{name}} or ng-show="isActive && isEnabled", that are being "$watched" by Angular are evaluated (sometimes more than once). This means that if you are invoking a function inside an expression:
<div ng-show="isShown()">
$scope.isShown = function(){
console.log("expect to see this text a lot of times");
return true;
};
the function will be executed on every digest loop.
A digest loop runs any time that something in Angular calls $scope.$digest, which by default happens on things like ng-click or ng-change or $http.then, etc..
New to angular, and did the codeschool course + the angular video from railscasts.
so this is my controller in the html file
<div ng-controller="ProviderDataCtrl">
<ul>
<li ng-repeat="entry in entries">
{{entry.name}}
</li>
</ul>
</div>
and this is the javascript file holding the controller
(function(){
app.controller('ProviderDataCtrl',function($scope){
$scope.entries = [
{name:"test"}
{name:"test2"}
{name:"test3"}
]
}]);
})();
for some reason in my html file, it just shows as {{entry.name}} and only 1 of it.
I cant seem to figure out the problem. Did i define the controller wrong in the js file??
Thanks
app is undefined
First define your angular app before using it
var app = angular.module('test',[]);
Demo Plunkr
Sorry if I'm missing something obvious, very new to Angular.
I'm running an application on this page: //hosted.demo.ca/md/SitePages/Home.aspx
I'm trying to set up the routing on the application but the page is just rendering blank with no errors in console.
routeProvider:
var spApp = angular.module('spApp', [])
.config(function($routeProvider){
$routeProvider.when('/userView',
{
templateUrl: 'partials/userView.html',
controller: 'userCtrl'
})
});
and my html like such:
<div id="mdContainer" ng-cloak>
<!-- Navigation -->
<div id='mdSidebar'>
<ul>
<li id="menuHome"><a href='#'><span>Home</span></a></li>
<li id="menuUsers"><a href='#/userView'><span>Users</span></a></li>
<li id="menuGroups"><a href='#'><span>Groups</span></a></li>
<li id="menuSites"><a href='#'><span>Sites</span></a></li>
<li id="menuReports"><a href='#'><span>Reports</span></a></li>
</ul>
</div>
<!-- Main view -->
<ng-view></ng-view>
</div>
Have you added the route module? Please try using something like:
var spApp = angular.module('spApp', ['ngRoute'])
See here for more information about this. In newer versions of Angular the route functions were moved to a separate module.
Also I can tell you from personal experience that it is very easy to forget to add the angular-route.js file into your html file using something like:
<script src="path/to/angular-route.js">
If you use bower you can easily set this up with:
bower install angular-route
I'm looking for a way to load a module (js, css and html) with just one directive anytime during the app life.
<my-module id="contacts"></my-module>
And the template of this directive generates
<my-module id="contacts">
<link type="stylesheet" href="modules/contacts/contacts.css">
<script type="text/javascript" src="modules/contacts/contacts.js"></script>
<ng-include src="modules/contacts/contacts.html"></ng-include>
</my-module>
And the .js file creates a new angular module
// modules/contacts/contacts.js
angular.module('my-contacts', [])
.controller(ContactsCtrl, function($scope) { ... });
And the '.html' uses a controller in this module
// modules/contacts/contacts.html
<ul ng-controller="ContactsCtrl">
<li ng-repeat="contact in contacts">{{ contact.name }}</li>
</ul>
It wont work because the page's module <html ng-app="my-app"> does not depends on my-contacts module. So I would like every module to inject itself as a my-app dependency.
I've found every module (object returned by angular.module) contains a requires array with it's dependencies. I've injected my-contacts into that array and this works:
// modules/contacts/contacts.js
angular.module('my-app').requires.push('my-contacts');
angular.module('my-contacts', [])
.controller(ContactsCtrl, function($scope) { ... });
But I can't find this property on the documentation. Is it standard or it can change anytime? anyone knows?
Update
To be clear, this is not to load a single module with a single component, this is meant to load a entire application, imagine it like a launcher (like MacOS dockbar or Ubuntu's unity sidebar) with dynamically added icons and when one of this icons are clicked it should run the module. But I don't know at the webpage start which apps this launcher should be able to launch and I need to add more applications dynamically. As each app can has it's own directives and services I use angular modules as apps.
<body ng-app="my-app">
<ul>
<li ng-repeat="module in modules">
<button ng-click="selectedApp = module.id">{{ module.name }}</button>
</li>
</ul>
<my-module id="{{ selectedApp }}"></my-module>
</body>
I'm not sure you're trying to abstract the code so much.
What you should be able to do:
Make a module
Put a directive in the module with your contacts list
Inject the module into your page. And use the contact list.
Dependencies are usually the second argument of a module definition. i.e:
angular.module('my-app', ['my-contacts']);
Is this what you were referring to? The dependencies and how to inject them correctly?