Initially, I was trying to get a bootstrap dropdown to load, but the directive wasn't working properly. Suspecting an issue with loading ui.bootstrap, I tried with a simple progressbar and it's still not loading. Long story short, I think ui.bootstrap is loading, but for some reason it's not launching correctly. I'm using webpack. Can anyone see what I'm doing incorrectly here? I'm not getting any errors on load.
My thoughts now: I haven't loaded the directive properly. Perhaps the templates aren't loading.
Bundle JS:
/* 3 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
__webpack_require__(4);
module.exports = 'ui.bootstrap';
/***/ },
Entry JS:
var angular = require('angular');
var uiBootstrap = require('angular-ui-bootstrap');
var uiRouter = require('angular-route');
var moment = require('moment');
var angularCalendar = require('angular-bootstrap-calendar');
var layout = require('./js/angular/layout/layout.module.js');
var layoutController = require('./js/angular/layout/layout.controller.js');
angular.module('app', ['layout','ngRoute','ui.bootstrap','mwl.calendar']);
var app = angular.module('app');
Layout Controller:
angular.module('layout', []);
angular
.module('layout')
.controller('Layout', Layout);
Layout.$inject = ['$log'];
function Layout($log) {
/*jshint validthis: true */
var vm = this;
}
Template:
<body ng-app="app" class="container">
<div ng-controller="Layout as layout">
<h1>{{layout.content.model.layout.header}}</h1>
<div class="nav">
<uib-progressbar value="55"></uib-progressbar>
</div>
</div>
</body>
Fixed: angular-ui-bootstrap wasn't in my package.json for some reason.
Related
AngularJS: Using angular.module & VM
I have defined my angular module as below and want to use VM as per guidelines. Not sure what I am doing wrong here but it gives me error in console:
Uncaught Error: No module: myApp
Here is my code:
<div ng-controller="Ctrl">
Hello, {{vm.name}}!
</div>
var app = angular.module('myApp');
app.controller('Ctrl', ['$scope', '$http',
function ($scope, $http) {
var vm = this;
vm.name = "John";
}]);
Here is my jsfiddle:
https://jsfiddle.net/dn7pkuf8/
First of, you need to add an empty array(or an array with your dependencies) when you declare your module. Without the array, you will try to fetch the module with the name myApp instead.
var app = angular.module('myApp', []);
Then you need to add the app name to the NgApp directive in the view, else the angular app want bootstrap.
Try it like this
<body ng-app="myApp">
<div ng-controller="Ctrl as vm">
Hello, {{vm.name}}!
</div>
</body>
When you create a new module you must pass an array as the second parameter.
var app = angular.module('myApp', []);
Otherwise it will look for an existing app 'myApp' which doesn't exist.
It looks like you're trying to use ContollerAs syntax. I've set up the plunkr here
Your HTML:
<html>
<head>
<script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<h1>Hello Plunker!</h1>
<div ng-controller="Ctrl as vm">
Hello, {{vm.name}}!
</div>
</body>
</html>
Your Javascript:
var app = angular.module('myApp', []);
app.controller('Ctrl', function () {
var vm = this;
vm.name = "John";
});
I couldn't get this working in your jsfiddle, but I think it was basically the syntax correction in the HTML where you use the controller, as well as the points raised by the others here (including ng-app, your javascript module syntax).
You are not using the correct syntax to create the app instance.
The correct syntax is as below
var app = angular.module('myApp',[]);
So what is the meaning of the sysntax you wrote?
var app = angular.module('myApp');
It means you have already created the instance and you wish to use it. Now you will get why angularjs is throwing this error. Because instead of creating a new instance it will look for that instance which is not created.
Note: The additional parameter [] is required to specify the
dependencies. It means you can add the existing angularjs
applications. Means you can add the dependencies and use it.
And you complete js file should like this below
var app = angular.module('myApp',[]);
app.controller('Ctrl', ['$scope', '$http',
function ($scope, $http) {
var vm = this;
vm.name = "John";
}]);
In my MVC 5 application I want to use some AngularJS. Now, I have a project card. You can call this card by following the url:
http://localhost/Project/Card/1
For this card, I have a list of projectTasks. Based on the id = 1 parameter I want AngularJS to show this list, but I don't know how to get the id parameter. I was looking at ngRoute, but I don't want to route I only want to construct a dynamic url in my ProjectTaskController.
What I have so far:
projectApp.js
(function () {
var app = angular.module("projectApp", ["ngRoute"]
.config(function ($routeProvider, $locationProvider) {
//configure the routing rules here
$routeProvider.when('/Card/:id', {
controller: 'ProjectTaskCtrl'
});
// enable HTML5mode to disable hashbang urls
$locationProvider.html5Mode(true);
})
}());
ProjectTask.js
(function (app) {
var projectTaskCtrl = function ($scope, $routeParams) {
alert($routeParams.id); // message: undefined
};
app.controller("ProjectTaskCtrl", projectTaskCtrl);
}(angular.module("projectApp")));
I've solved it by using ng-init:
in my MVC5 View (Show.cshtml) I added:
<div id="projectTasks" ng-app="ProjectApp">
<div ng-controller="ProjectTaskCtrl">
<input type="hidden" id="projectId" ng-model="projectId" ng-init="projectId=#ViewBag.projectId"/>
<!-- some more code -->
</div>
</div>
In my ProjectTaskCtrl.js:
(function (app) {
var projectTaskCtrl = function ($scope) {
$scope.$watch("projectId", function(){
// I can now use projectId in whatever I want:
alert($scope.projectId);
});
};
app.controller("ProjectTaskCtrl", projectTaskCtrl);
}(angular.module("projectApp")));
I got Error: reCaptcha has not been loaded yet. when using google's angular-recaptcha package.
the index.html is as following, and it display fine to show recaptcha and a button to call login function in controller. and recaptcha works fine as well.
<div vc-recaptcha class="g-recaptcha" data-sitekey="key"></div>
<div ng-click="lc.login()">submit</div>
app.js is as
(function () {
'use strict';
angular
.module('loginService', [
'vcRecaptcha'
]);
})();
controller is as following, and the error is from here. it looks like I did not inject recaptcha module right.
(function () {
'use strict';
angular
.module('loginService.login.controllers')
.controller('LoginController',
['$scope',
'vcRecaptchaService',
function ($scope, vcRecaptchaService) {
var lc = this;
...
...
function login() {
if(vcRecaptchaService.getResponse() === "") // error is from here
{...}
}]);
It looks that I do not inject recaptcha package in the right way. any one can help?
Have you loaded the library the following way?
<script src="//www.google.com/recaptcha/api.js?render=explicit&onload=vcRecaptchaApiLoaded" async defer></script>
<script src="./angular-recaptcha.js"></script>
<script>
var app = angular.module('loginService', ['vcRecaptcha']);
// code
</script>
Take a look at the example and the documentation:
https://github.com/VividCortex/angular-recaptcha/blob/master/demo/usage.html
https://github.com/VividCortex/angular-recaptcha
Add the loginService to the loginService.login.controllers
angular.module('loginService.login.controllers', ["loginService"])
I'm developing in DNN 8.0 with its new SPA framework.
I'm using angularjs instead of the defaulted KnockOut.
When I put module setup code in view.html, it works fine. But it doesn't work if I try to put the code in a different file, say app.js. Anyone has seen this before?
A snap shot of the view.html that works looks like this:
[JavaScript:{ jsname: "JQuery" }]
[JavaScript:{ path: "~/Resources/Shared/scripts/dnn.jquery.js"}]
[JavaScript:{ path: "~/DesktopModules/DNNSPA/Scripts/angular.js"}]
[JavaScript:{ path: "~/DesktopModules/MyApp/Scripts/angular-route.js"}]
[JavaScript:{ path: "~/DesktopModules/MyApp/ngApp/app.js"}]
[JavaScript:{ path: "~/DesktopModules/MyApp/ngApp/ngControllers/FirstController.js"}]
[CSS:{ path: "~/DesktopModules/MyApp/CSS/bootstrap.min.css"}]
<script type="text/javascript">
var d = new Date();
var moduleId = parseInt("[ModuleContext:ModuleId]");
var portalId = parseInt("[ModuleContext:PortalId]");
var sf = $.ServicesFramework(moduleId);
var moduleName = "MyApp";
if ("[ModuleContext:EditMode]" === 'True') {
var editMode = true;
}
console.log(editMode);
var currentDate = d;
var app = angular
.module('dnnapp', [
'ngRoute'
])
.config(
function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/DesktopModules/MyApp/partials/firstView.html',
controller: 'firstController'
});
});
app.controller('firstController', function ($scope, $http) {
// controller code
});
</script>
<div class="module-wrap" ng-view>
</div>
All setup code is in view.html.
But if I move the module definition to app.js and controller definition to FirstController.js, it doesn't work.
I've seen others make it work in different files, what am I doing wrong here?
The SPA tokens, ie: [ModuleContext:ModuleId] will not get replaced in your .js file. Therefore you need to do some setup work for your angular module on the page and move all the rest to a js file. Here is one technique:
On your View.html, define an html element for your angular app with an ng-init() method:
<div id='dnnuclear-item-[ModuleContext:ModuleId]' ng-controller="ItemController"
ng-init="init([ModuleContext:ModuleId],'[ModuleContext:ModuleName]','[ModuleContext:EditMode]')">
...
</div>
Also on your View.html, bootstrap your angular app:
<script type="text/javascript">
angular.element(document).ready(function () {
var moduleContainer = document.getElementById('dnnuclear-item-[ModuleContext:ModuleId]');
angular.bootstrap(moduleContainer, ["dnnuclear.ItemApp"]);
});
</script>
Then in your .js file, define the angular module and controller with the init method implementation:
var dnnuclear = dnnuclear || {};
dnnuclear.ItemApp = angular.module("dnnuclear.ItemApp", ['ngDialog']);
dnnuclear.ItemApp.controller("ItemController", function ($scope, $window, $log, ngDialog, dnnServiceClient) {
...
$scope.init = function (moduleId, moduleName, editable) {
$scope.ModuleId = moduleId;
$scope.EditMode = editable;
dnnServiceClient.init(moduleId, moduleName);
$scope.getAll();
}
}
If you need to pass more information to the module than a few variables, I would recommend changing this approach. I have more on this in my DNNHero.com tutorial, Advanced Angular Concepts.
You should try the AngularDNN module. It will probably save your time. It can be found here:
http://store.dnnsoftware.com/home/product-details/angulardnn
How I can use On demand loading of controllers /services in angularJs. now I have a mainApp which referenced by Index.html. I am using $routeprovider to routing but all the required controller/services are referenced in the corresponding views eg:
<section id="pageLevelScripts">
<!--location of page level scripts-->
<script src="/Area/Sotaria/Controllers/UserController.js"></script>
</section>
<div class="row" >
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<ol class="breadcrumb">
<li>Home</li>
<li>Usermanagement</li>
<li class="active"><span>Users</span></li>
</ol>
<h6>{{name}}</h6>
</div>
</div>
This is my requirement I don't want to load all the controllers in my Index.html. but when I navigate to the childView, I am getting an error "Usercontroller is undefined", So how I can enable ondemanidng / lazy loading of controllers in angualrjs, .Ie. when ever the child page loaded ,then only its related controllers should load.
The reason you get undefined is because just loading the JS file doesn't make Angular aware of it. You must attach it to Angular's $controllerProvider.
You can create a custom service that does the lazy loading for you or use one of the many already built by other people. Here is an example of a custom one that you can use with requirejs.
If the below example is not explanatory enough you can read this blog post here: Strange Milk - Front End Development
Custom Provider
function LoaderProvider(){
this.controller = null;
this.directive = null;
this.filter = null;
this.factory = null;
this.service = null;
//service factory definition
this.$get = ['$q', '$rootScope', function($q, $rootScope){
return {
load: function (path) {
var q = $q.defer();
require([path], function () {
$rootScope.$apply(function () {
q.resolve();
});
});
return q.promise;
}
};
}];
}
var container = new LoaderProvider();
module.provider('Loader', function(){
return container;
});
Your Apps config:
.config(function (LoaderProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
// save references to the providers
LoaderProvider.controller = $controllerProvider.register;
LoaderProvider.directive = $compileProvider.directive;
LoaderProvider.filter = $filterProvider.register;
LoaderProvider.factory = $provide.factory;
LoaderProvider.service = $provide.service;
})
An example of how you would use this in your App's routes. Learn more about Resolve
resolve : {
load : ['Loader', function(Loader){
return Loader.load('../app/global/controllers/headerCtrl');
}]
}
Some other resources/solutions:
ocLazyLoad
angularAMD