标签: single-page-application

我正在开发一个指令,根据其模板中定义的单击事件(ng-click)显示和隐藏它的内容.在使用该指令的一些视图中,我希望能够知道该指令当前是显示还是隐藏它的内容,以便我可以响应DOM更改.该指令具有隔离范围,我试图在指令被"切换"时通知父范围.我试图通过将回调函数传递给使用它的指令来实现这一点,当指令的状态发生变化时可以调用它,即隐藏或显示

我不确定如何正确实现这一点,即指令的状态(隐藏或显示)存储在指令的隔离范围内,并在ng-click之后确定.因此,我需要从指令中调用父作用域的函数,而不是从视图中调用.

这将通过一个例子使WAAY更有意义.这是一个充满活力的展示我想做的事情:

http://plnkr.co/edit/hHwwxjssOKiphTSO1VIS?p=info

var app = angular.module('main-module',[])

app.controller('MainController', function($scope){
  $scope.myValue = 'test value';
  $scope.parentToggle = function(value){
    $scope.myValue = value;
  };
});

app.directive('toggle', function(){
    return {
            restrict: 'A',
            template: '<a ng-click="toggle();">Click Me</a>',
            replace: true,
            scope: {
                OnToggle: '&'
            },
            link: function($scope, elem, attrs, controller) {
                $scope.toggleValue = false;
                $scope.toggle = function () {
                    $scope.toggleValue = !$scope.toggleValue;
                    $scope.OnToggle($scope.toggleValue)
                };
            }
        };
});

我对Angular比较新.开始时这是一个坏主意吗？我应该使用服务还是其他东西而不是传递函数引用？

谢谢!

我正在尝试使用Webpack + Semantic UI和Vue.js,我找到了这个库https://vueui.github.io/

但是存在问题:

ERROR in ./~/vue-ui/components/sidebar/sidebar.jade
Module parse failed: /Project/node_modules/vue-    
ui/components/sidebar/sidebar.jade Unexpected token (1:24)
You may need an appropriate loader to handle this file type.

所以我安装了玉(哈巴狗),但仍然没有运气.

并且在github上有关于该lib的评论:

WIP,请勿使用(https://github.com/vueui/vue-ui)

我已经设法在我的模板中导入语义css,如下所示:

@import './assets/libs/semantic/dist/semantic.min.css';

但问题是我不能使用像dimmer和其他东西这样的semantic.js函数.

问题是我已经有了一些用语义编写的旧代码库,不使用任何其他css框架(bootstrap或materialize)会很好.

有没有优雅的方法在我的vue.js项目中包含语义UI？

应该是一个简单的问题,只是找不到答案.

我有一个带有web api的SPA(AngularJS),它是由Owin自己托管的.我使用Nancy来提供页面,但我想摆脱Nancy并使用Index.html作为我的单页.

我在这里看到了这个问题:如何将除Web API以外的所有内容路由到/index.html

我不能使用已接受的答案,因为我没有MVC和HomeController,在更新的问题中建议的方式也不起作用,我得到 No HTTP resource was found that matches the request URI 'http://admin.localhost:33333/'. No route providing a controller name was found to match request URI 'http://admin.localhost:33333/'

例如:

 $stateProvider
            .state('external', {
                url: 'http://www.google.com',

            })

url假设这是一个内部状态.我希望它像href或者那种效果.

我有一个将从ui路由构建的导航结构,我需要一个链接转到外部链接.不一定只是谷歌,这只是一个例子.

不是在链接中查找,也不是在$ state.href(' http://www.google.com ')中查找.在路由配置中以声明方式需要它.

我必须使用许多不同的模块(如todo模块,文档模块和管理员用户的大用户管理模块)进行Web应用.总页数> 100.并且每个用户的模块访问权限不同.

我正在使用Laravel和Vue-router.

但这样做的最佳做法是什么？

1. 创建一个SPA应用程序,一个大的vue-router用于所有东西？
2. 对于每个模块一个自己的单个"SPA"(有自己的vue-router)？
3. 还是另一个建议......？

我知道AngularJs是FrontEnd而Laravel是Backend,但我的问题是:

为什么我需要首先使用AngularJs,我需要的所有东西都是通过Laravel完成的？

从我的理解是,我可以在任何LANGS的应用JS或PHP,但我发现很多用户同时使用这对我来说是初学者它似乎像矫枉过正,所以可能有人请在一个尽可能简单的形式解释回答.

在同一个项目中使用两者有什么好处？app/folders当你特意使用两者都是MVC时,你通常如何构建你的？

我可以让本教程在新项目中工作,但不能在我现有的项目中工作.

我的项目是一个ASP.Net MVC 4 Web应用程序,在web.config文件中具有以下属性:

<appSettings>
  <add key="webpages:Enabled" value="true"/>
</appSettings>

这是因为我的应用程序是单页面应用程序,它在客户端使用AngularJS.我的应用程序中唯一的页面是index.cshtml,我已经为signalR添加了相关的代码:

 <!-- signalR chat -->
<script src="~/Scripts/jquery.signalR-1.0.0.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="/signalr/hubs"></script>
<!--Add script to update the page and send messages.--> 
<script type="text/javascript">
    $(function () {
        // Declare a proxy to reference the hub. 
        var chat = $.connection.chatHub;
        // Create a function that the hub can call to broadcast messages.
        chat.client.broadcastMessage = function (name, message) {
            // Html encode display name and message. 
            var …

ng-show="!notesOpened"如果notesOpened变量为true,我用来隐藏div.然而,当它隐藏它会弄乱布局.有没有办法让ng-show以与css属性相同的方式运行visibility:hidden？以便隐藏div周围的所有div元素保持在同一个地方

我有一个Angular SPA,根据一些餐馆数据的不同削减,提供各种推荐列表和谷歌地图,(见m.amsterdamfoodie.nl).我希望这些列表中的每一个都有自己的URL.为了让Google抓取不同的列表,我使用了<a>用于offcan数据导航的标签.

目前,<a>标签会导致视图刷新,这对于地图非常明显.

• 我可以使用ng-click和阻止这种情况$event.preventDefault()(参见下面的代码片段),但是我需要实现一种更新浏览器URL的方法.
• 但是在尝试Angular $state或浏览器时history.pushstate,我最终会触发状态更改和视图刷新......!

因此,我的问题是如何更新模型和URL,但不刷新视图？ (另请参阅Angular/UI-Router - 如何在不刷新所有内容的情况下更新URL？)

我已经尝试了很多方法,目前有这个HTML

<a href="criteria/price/1" class="btn btn-default" ng-click="main.action($event)">Budget</a>

在控制器中:

this.action = ($event) ->
    $event.preventDefault()
    params = $event.target.href.match(/criteria\/(.*)\/(.*)$/)

    # seems to cause a view refresh
    # history.pushState({}, "page 2", "criteria/"+params[1]+"/"+params[2]);

    # seems to cause a view refresh
    # $state.transitionTo 'criteria', {criteria:params[1], q:params[2]}, {inherit:false}

    updateModel(...)

并且,我认为发生的是我触发$stateProvider代码:

angular.module 'afmnewApp'
.config ($stateProvider) ->
  $stateProvider
  .state 'main',
    url: '/' …

这是一个使用Hot Towel SPA模板的MVC 4应用程序.每当我更改HTML和/或javascript中的任何内容时,我可以获得要显示的新代码的唯一方法是清除浏览器缓存.F5,cntrl-F5,shift-F5,没什么用.

我通常不是网络开发人员,只是学习这个.我以前做过常规的MVC而没有这个问题,也许它与HTML和javascript在我的项目中的位置有关(即在/ App文件夹中)？我想解决这个问题.

我可以完全删除HTML文件并运行应用程序,它仍然可以像以前一样运行.清除缓存并运行然后我获得更新.

它使用Firefox,Chrome,IE运行IIS Express ...

谢谢..