I am attempting to us ng-cache in order to pull in my templates in an angular project written in ES6 and using webpack.
I have the following files:
dashboard.config.js:
require('ng-cache!./index.html');
require('ng-cache!./nav-sidebar.html');
export default function DashboardConfig($stateProvider) {
'ngInject';
// Define the routes
$stateProvider
.state('dashboard', {
url: '/dashboard',
controller: 'DashboardController as $ctrl',
templateUrl: 'index.html'
});
}
This generates the following error when running webpack:
Error: Parse Error: <div class=\"clearfix\"></div>\r\n\r\n<div flex layout=\"row\" class=\"dashboard\">\r\n\r\n Dashboard!\r\n <ng-include src=\"'nav-sidebar.html'\"></ng-include>\r\n\r\n <!-- Container #3 -->\r\n\r\n\r\n <!-- Container #4 -->\r\n <md-content id=\"dashboard-content\" ui-view=\"\" class=\"md-padding\" layout=\"column\"></md-content>\r\n \r\n <!--<md-content flex id=\"content\"></md-content>-->\r\n\r\n</div>"
Using unminified HTML
And produces the following output in the browser when visiting "/dashboard":
module.exports = "
\r\n\r\n
\r\n\r\n Dashboard!\r\n \r\n\r\n \r\n\r\n\r\n \r\n
\r\n \r\n \r\n\r\n
"
Now there are a couple of odd things happening here. Why is it trying to parse the HTML? Getting rid of the directives get ride of the parsing error, but I still have the issue of seeing module.export="..." for my output instead of seeing the template.
Here is the contents of index.html
<div class="clearfix"></div>
<div flex layout="row" class="dashboard">
Dashboard!
<ng-include src="'nav-sidebar.html'"></ng-include>
<md-content id="dashboard-content" ui-view="" class="md-padding" layout="column"></md-content>
</div>
The issue is that I had the raw html loader specified in my webpack.config.js file. I had that specifying the loader in the call to require() would over-ride any settings I had specified in the webpack file and this is not the case. Fixing this also removed the parsing error warnings.
Related
I'm reading the book ng-book on angular 2 and there is the following:
let loadingGif: string = ((<any>window).__karma__) ? '' : require('images/loading.gif');
#Component({
selector: 'youtube-search',
template: `
<div class='container'>
<div class="page-header">
<h1>YouTube Search
<img
style="float: right;"
*ngIf="loading"
src='${loadingGif}' />
</h1>
</div>
I'm interested in this part:
src='${loadingGif}'
The short note in the book says the following:
Notice that our img has a src of ${loadingGif} - that loadingGif
variable came from a require statement earlier in the program. Here
we’re taking advantage of webpack’s image loading feature. If you want
to learn more about how this works, take a look at the webpack config
in the sample code for this chapter or checkout
image-webpack-loader⁴².
But there are no details. Can somebody please how does it all work?
This only works with inline templates (template in *.ts file) but not when the template is in an *.html file (like templateUrl: './my.component.html).
src='${loadingGif}'
Is TypeScript string interpolation and not related to Angular. It replaces ${loadingGif} with the content of loadingGif
I am new to angular js
I want to create my project structure like this
- APPLICATION
-index.html
-app.js
-modules
-core
-controllers
-directive
-views
-core.app.js
-core.config.routes.js
-test
-controllers
-directive
-views
-test.app.js
-test.config.routes.js
Here core, test is different modules(ng-app)
I configure like Here
app.js
angular.module('mainapp',['mainapp.core','mainapp.test'])
core.app.js
angular.module('mainapp.core',[])
test.app.js
angular.module('mainapp.test',[])
Here I am gettiing problem that my core module states are not working properly . I am using $staeprovider(ui-views) for routing.
example
core.config.routes.js
angular.module('mainapp.core').config(function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state('core', {
url: '/core',
templateUrl: 'modules/core/views/core.html',
})
.state('core.sidebar ', {
url: '^/sidebar ',
templateUrl: 'modules/core/views/core.sidebar .html'
})
});
test.config.routes.js
angular.module('mainapp.test').config(function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state('core.sidebar .test', {
url: '^/test',
templateUrl: 'modules/core/views/test.html'
})
});
my html pages are
index.html
<div ng-app="mainapp">
<div ui-view= ""></div>
</div>
core.html
` <div>
<h1>I am designing jeader Here. it goes on tp of page</h1>
<div ui-view></div>
</div>`
core.sidebar .html
`<div>
<h2>It goes left side</h2>
<h1>I am designing sidebar Here</h1>
<div ui-view></div>
</div>`
till Here it's working fine. heaser, sider bar is loading $state at core.sidebar
Here I am getting problem it' not working
test.html
<div>
<h1>I am designing middle content Here</h1>
</div>
Please any one help me to solve the issue and build better approach for project structure
I recommend you look at the Angular Style Guide in how they recommend project structuring. https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#application-structure-lift-principle
I really like their recommendation for using the LIFT approach:
Locating our code is easy
Identify code at a glance
Flat structure as long as we can
Try to stay DRY (Don’t Repeat Yourself) or T-DRY
In that spirit, you might just have a modules folder and then use a file naming convention to keep things organized. On my projects, I do this and use ng-structure prefixes. Example:
nx.core
controller.header
controller.footer
controller.app
routes
nx.admin
routes
controller.admin
directive.blah
Doing this, I was able to achieve both the flat organization as well as a quickly filtering by eye, what files I need. Then only drawback is if you use a shortcut in your IDE to quickly open files, you normally think in terms of FindingsController not via a prefix like controller.Findings.
Just my 2¢
I have been following a pluralsight course called Creating Apps with Angular, Node and Token Authentication, and am writing my own custom alert messaging.
Basically, what I want to do, is to add different CSS classes depending on the state of the alert message.
When I load my app, I get the following error in the console:
Error: [$parse:syntax] Syntax Error: Token '}' is unexpected, expecting [:] at column 83 of the expression [{'flipInY': alert.show, 'flipOutY':!alert.show, 'alert-hidden:!alert.hasBeenShown'}] starting at [}]
I don't understand, since I'm pretty sure my syntax is correct. Can anybody point out what I'm doing wrong?
My html:
<div class="container" ng-cloak>
<div ui-view></div>
<div class="alert alert-{{alert.type}} animated main-alert" ng-class="{'flipInY': alert.show, 'flipOutY':!alert.show, 'alert-hidden:!alert.hasBeenShown'}"><strong>{{ alert.title }}</strong>
{{ alert.message }}
</div>
</div>
If you need more details, please ask, or check the Github repo. The relevant files are index.html in the root folder, register.js under app/scripts/controllers and alert.js under app/scripts/services.
Thanks for the help.
Change this:
'alert-hidden:!alert.hasBeenShown'
to this:
'alert-hidden':!alert.hasBeenShown
You missed a closing single-quote in property name.
I've been trying to make this code that I inherited work for a couple of days now but I still got no luck. Admittedly I am still a beginner in Angular but I think I already did what I could.
I'm using Yeoman's angular generator and grunt. grunt serve works fine but grunt serve:dist doesn't. At first it has something to do with some of the partial templates not getting included into $templateCache but I already fixed it. The templates are now included in the final script.js and the network tab of chrome dev tools no longer reports 404s. Debugging ui-router in the dist version of the application gives me Unknown provider: aProvider <- a which is apparently not very helpful. This is turning into a guessing game really. Below are code snippets. I hope somebody can help me out. Any advice would be good.
index.html
<div id='main-container' ng-controller="AccountCtrl">
<div id='logged-in-container' ng-if="isLoggedIn"><!-- container-fluid -->
<div id='left-sidebar' class="col-lg-2 bg-dark-blue">
<div id='left-sidebar-navigation' ng-controller="SidebarNavigationCtrl">
<left-Sidebar-User-Profile></left-Sidebar-User-Profile>
<left-Sidebar-Navigation></left-Sidebar-Navigation>
</div>
</div>
<div id='main-container-body' class="col-lg-10" ui-view >
</div>
</div>
<div id='logged-off-container' ng-if="!isLoggedIn">
<div class="col-lg-12" ui-view >
</div>
</div>
</div>
Please note the directives left-Sidebar-User-Profile and left-Sidebar-Navigation works. Only the ui-view doesn't.
app.js
$stateProvider
.state('login', {
url:'/',
templateUrl: 'views/login.html',
controller: 'AccountCtrl',
controllerAs: 'main',
resolve: resolveLoggedIn
});
I already tried changing the code above to the format like views: { 'login': { url: ... } } which I believe is the correct thing but I got the same behavior so I reverted my changes.
Gruntfile.js is here as it's pretty long.
Thanks in advance folks.
This might be occuring because your angular code is not mininfication ready. For a better insight to the same, see this.
You should consider using something such as grunt-ng-annotate
I am learning Meteor and I'm trying to add internationalization support with the tap:18n package. Unfortunately, the template helper function _ is not availble inside Angular modules. For example
<div>{{_ "foo"}}</div>
works, but does not when using it inside a module template :
> index.html
<div ng-app="app" ng-include="'foo.ng.html'">
> foo.ng.html
<div ng-app="bar">
<div>{{_ "bar"}}</div>
</div>
note: app is declared inside foo.js as angular.module('app', ['angular-meteor']);, in the project root level.
Is it possible to make helpers available inside Angular modules?
(note: see referenced issue.)
** Edit **
Same thing happens when trying to render package templates inside another template :
> index.html
<section ng-app="users"
ng-include="'users/usersession.ng.html'">
</section>
> users/usersession.ng.html
<ul class="nav navbar-nav navbar-right">
{{> loginButtons}} <!-- here -->
</ul>
Then I get Syntax Error: Token '>' not a primary expression at column 1 of the expression [> loginButtons] starting at [> loginButtons].
Note: the module users is defined and everything works fine without the {{> loginButtons}} expression.
You can use meteor templates inside angular. Try something like:
<meteor-include src="myTemplate"></meteor-include>
Your template would be something like:
<template name="myTemplate">
<div>{{_ "foo"}}</div>
</template>
Remember when naming .html files, the angular templates will be name.ng.html and the meteor templates will just be name.html