I seem to have an issue getting ui-router to actually route things. I am sure that all of my javascript files are being loaded and angular isn't throwing any errors. I have an HTML file that declares the app and controller and then I load the js file that has the router. You can see my code on given link.
https://github.com/ikshit1/testProject
In your main index.html file make sure you have
<main ui-view></main>
Related
Getting a Error: $controller:ctrlreg error when my Angular code is loaded from our CDN.
However, when I load the same Angular, from a local server, everything works.
We are using gulp to concat, minify and rev all our angular code.
I have checked the actual js file that loads in the browser and I see my controller.
Any ideas?
The error is:
all.js:258 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.5.11/$controller/ctrlreg?p0=accountController
Here is my controller.
(function(){
'use strict';
angular.module('account')
.controller('accountController', [accountController]);
function accountController(){
}
})();
This is my html
<div ng-controller="accountController as ctrl">
</div>
You should have a empty dependency to your module, change it as
angular.module('account',[])
.controller('accountController', [accountController]);
The problem ended up being a cacheing issue in CloudFront. The JS file that was getting downloaded on my sandbox was not updating in the CDN.
I am using react's create-react-app for my new application.
I am really getting confused to separate index.html page for client side and admin panel.
I have different functional flows and css files for both side.
So index.html file should be loaded based on router navigation.
Example:
http://example.com => should load client/index.html
http://example.com/admin => should load admin/index.html
Note: i have tried webpack's multiple entries method and webpack html plugin. But it only separates bundle files not html(while navigate).
Please help me out.
webpack just a module bundler, It doesn't control which page show, This should be done by router.
if it's single page, you can use react-router
if it's multi page, you can use express route
after using the below code to include the external scripts, I don't really want any additional html pages.
var $script = require("scriptjs")
$script("/myscript.js")
I have AngularJS project with more than 20 html templates (routes, modals).
I'm using grunt-angular-templates to split tempaltes in one file templates.js.
In my Angular project I'm using angular-route 1.2.25 for routing.
When I try to use template from templates.js file, browser crashes and not responding. There is any error on console.
The problem is only with html templates with Angular stuff (ng-switch, ng-show etc.)
When I load clean html it works.
I thing the problem is with compile the templates from $templateCache, but how o manage it?
Templates.js
...
$templateCache.put("name","HTML");
...
After long hours of search I found what's wrong.
In my solution I'm using Modal Boostrap for Angular.
grunt-angular-templates plugin don't compile this templates correctly. I just skip this files and all works.
I am learning Typescript and Angular and I just fixed a problem with an unregistered controller because the script for the controller was loaded after the script for the application module. So I looked at index.html in the TodoMVC sample to see how the files for the controller, service and directives were loaded and don't see them loaded anywhere. Where does the code for these classes get loaded?
They are loaded using script tags : https://github.com/tastejs/todomvc/blob/gh-pages/architecture-examples/angularjs/index.html#L69-L73
I have a simple setup of an angularjs application. The scripts are loaded with requirejs. When loading the application, I get Uncaught Error: No module: myapp in the console.
The scripts are loaded in order scripts.js (requirejs configuration), jquery, angular and then app.
Here is the Plunker.
You need to remove the ng-app directive from the html element. See the updated Plunker.
First, the directive is not necessary, because you already manual bootstrap AngularJS (and ng-app is simply the shortcut to do that).
Second, the reason AngularJS reports the error is because when it processes ng-app (upon document ready event), the module file (in app.js) has not been loaded by RequireJS (that's why you have to do manual bootstrap in the first place).